Js实现京东大的轮播图及相关动画效果
来源:互联网 发布:java post 二进制 编辑:程序博客网 时间:2024/06/05 18:37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div id="content">
<ul id="list">
<li style="display:block;"><img src="../img/1.jpg" alt=""></li>
<li><img id="obj" src="../img/2.jpg" alt=""></li>
<li><img id="obj" src="../img/3.jpg" alt=""></li>
<li><img id="obj" src="../img/4.jpg" alt=""></li>
<li><img id="obj" src="../img/5.jpg" alt=""></li>
<li><img id="obj" src="../img/6.jpg" alt=""></li>
</ul>
<div id="big1">
<div id="small"><</div>
</div>
<div id="big2" >
<div id="small" style="float:right">></div>
</div>
<ul id="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
var big = document.getElementById("big");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var lrp = slider.getElementsByTagName('li');
var index = 0;
//隐藏显示
content.onmouseover = function(){
big1.style.display = "block";
big2.style.display = "block";
}
content.onmouseout = function(){
big1.style.display = "none";
big2.style.display = "none";
}
//点击切换
big1.onclick = function(){
index++;
if(index==lis.length-1){
index=0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
big2.onclick = function(){
index--;
if(index<0){
index=lis.length-1;
}
for (var i = lis.length-1; i >= 0; i--) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
//123456
for (var i = 0; i < lrp.length; i++) {
lrp[i].onmouseover = function(){
index++;
if(index==lrp.length-1){
index=0;
}
for (var i = 0; i < lrp.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
}
}
// 实现图片的自动切换效果
//时间间隔 单位毫秒
var timeInterval=2000;
setInterval(changeImg,timeInterval);
function changeImg()
{
// var obj=document.getElementById("obj");
if (index==lis.length-1)
{
index=0;
}
else
{
console.log(index);
index++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
console.log(index);
// obj.src=arr[index];
}
</script>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div id="content">
<ul id="list">
<li style="display:block;"><img src="../img/1.jpg" alt=""></li>
<li><img id="obj" src="../img/2.jpg" alt=""></li>
<li><img id="obj" src="../img/3.jpg" alt=""></li>
<li><img id="obj" src="../img/4.jpg" alt=""></li>
<li><img id="obj" src="../img/5.jpg" alt=""></li>
<li><img id="obj" src="../img/6.jpg" alt=""></li>
</ul>
<div id="big1">
<div id="small"><</div>
</div>
<div id="big2" >
<div id="small" style="float:right">></div>
</div>
<ul id="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
var big = document.getElementById("big");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var lrp = slider.getElementsByTagName('li');
var index = 0;
//隐藏显示
content.onmouseover = function(){
big1.style.display = "block";
big2.style.display = "block";
}
content.onmouseout = function(){
big1.style.display = "none";
big2.style.display = "none";
}
//点击切换
big1.onclick = function(){
index++;
if(index==lis.length-1){
index=0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
big2.onclick = function(){
index--;
if(index<0){
index=lis.length-1;
}
for (var i = lis.length-1; i >= 0; i--) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
//123456
for (var i = 0; i < lrp.length; i++) {
lrp[i].onmouseover = function(){
index++;
if(index==lrp.length-1){
index=0;
}
for (var i = 0; i < lrp.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
}
}
// 实现图片的自动切换效果
//时间间隔 单位毫秒
var timeInterval=2000;
setInterval(changeImg,timeInterval);
function changeImg()
{
// var obj=document.getElementById("obj");
if (index==lis.length-1)
{
index=0;
}
else
{
console.log(index);
index++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
console.log(index);
// obj.src=arr[index];
}
</script>
</html>
其余样式大家可以下载了文件自己去看哦~都是小编刚刚敲出来的 代码还热乎呢 嘿嘿
博主每次都会把学到的小知识跟大家分享哦 假如有什么缺点,还是希望朋友们多多提出 方便我提升哦 嘿嘿!蟹蟹大家啦~喜欢的点个赞哦 可以互相关注 哈哈哈 明天见
1 0
- Js实现京东大的轮播图及相关动画效果
- js实现动画效果
- JS实现运动的动画效果 框架
- 通过js实现简单的动画效果
- 20150730 JS动画效果实现
- JS实现动画效果框架
- 用js实现动画效果
- JS实现倒计时动画效果
- 动画效果的实现
- JS+CSS实现Google首页的动画效果
- js实现div整块向上移动的动画效果
- 用js实现类似jquery里的animate动画效果
- js 实现简单的动画效果(小圆移动)
- JS(JQ)实现带动画的回到顶部效果
- 一个js函数的改进(实现动画效果)
- 原生js简单实现jQuery的动画效果
- iphone的动画效果类型及实现方法
- iPhone的动画效果类型及实现方法
- HDU5536 Chip Factory(01字典树)
- Opencv之二帧差法运动目标检测与轮廓提取
- Java: Random.nextInt() 和Math.random()的区别
- 现阶段对数据库中知识发现KDD、数据挖掘、集成学习、深度学习、机器学习、人工智能、统计学、大数据、云计算的个人理解:
- 给自己看的NIM
- Js实现京东大的轮播图及相关动画效果
- Android Studio – Cannot resolve symbol ‘R’
- catalan数
- $_SERVER详解
- POJ-1260 Pearls (dp)
- python——word2vec
- [tyvj1052]没有上司的舞会
- 关于relative和absolute属性
- ELK之Logstash