利用js、jQuery编写轮播图

最新推荐文章于 2021-12-14 10:14:36 发布

纤悉儿

最新推荐文章于 2021-12-14 10:14:36 发布

阅读量286

点赞数

分类专栏： js的页面特效文章标签： js的轮播图 jQuery实现的图片旋转木马

js的页面特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

旋转木马的实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js图片层叠实现轮播图，旋转木马特效</title>

</head>
<body>

<div id="box">
<div class="slide">
<ul>
       <li><a href="#"><img src="图片的路径" alt=""></a></li>
       <li><a href="#"><img src="图片的路径" alt=""></a></li>
       <li><a href="#"><img src="图片的路径" alt=""></a></li>
       <li><a href="#"><img src="图片的路径" alt=""></a></li>
       <li><a href="#"><img src="图片的路径" alt=""></a></li>
</ul>
<div class="arraw">
<a href="javascript:;" class="next"></a>
<a href="javascript:;" class='prev'></a>
</div>
</div>
</div>
<script>
var box = document.querySelector('#box');
var slide = document.querySelector('.slide');
var arraw = document.querySelector('.arraw');
  var lis = document.querySelectorAll('li');
var json = [ // 包含了5张图片里面所有的样式
   { // 1
       width:400,
       top:20,
       left:100,
       opacity:20,
       z:2,
       id:1
   },
   { // 2
       width:600,
       top:70,
       left:50,
       opacity:60,
       z:3,
       id:2
   },
   { // 3
       width:800,
       top:100,
       left:200,
       opacity:100,
       z:4,
       id:3
   },
   { // 4
       width:600,
       top:70,
       left:550,
       opacity:60,
       z:3,
       id:4
   },
   { //5
       width:400,
       top:20,
       left:650,
       opacity:20,
       z:2,
       id:5
   }
];
box.addEventListener('mouseover', function(){
animate(arraw, {opacity: 100});//animate()自定义动画
});
box.addEventListener('mouseout', function(){
animate(arraw, {opacity: 0});
});

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
next.addEventListener('click', function(){
clearInterval(timer);
if(flag == true){
move(true);
flag = false;
}
});
next.addEventListener('mouseleave', function(){

clearInterval(timer);

run();

});
prev.addEventListener('click', function(){
clearInterval(timer);
if(flag == true){
move(false);
flag = false;
}
});
prev.addEventListener('mouseleave', function(){
run();
});

move();
run();
function run(){
clearInterval(timer);
timer = setInterval(function(){

if(flag == true){
flag = false;
move(true);
}
},500);
}

function move(x){
if(x != undefined){
if(x){
json.push(json.shift());
}else{
json.unshift(json.pop());
};
};

for(var i = 0; i<json.length; i++){
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity: json[i].opacity,
zIndex: json[i].z
},function(){flag = true;})
};
}

};
};

</script>
</body>
</html>

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
来源：http://sc.chinaz.com/ 站长素材

纤悉儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用js、jQuery编写轮播图

旋转木马的实现代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &am
复制链接

扫一扫