jquery实现图片轮播淡入淡出效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现图片轮播淡入淡出效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin:0; padding:0;}
#container {width:605px; height:284px; position:relative; border:1px solid; margin:0 auto;}
.topic {position:absolute; top:0px; left:0px; display:none;}
#pages {width:100%; height:20px; padding:5px 0; background:black; position:absolute; left:0; bottom:0;}
#pages div {width:20px; height:20px; border-radius:10px; background:white; margin-left:10px; float:left;}
#pages div.curr {background:red;}
#prev, #next { width:50px; height:100px; position:absolute; top:0; bottom:0; margin:auto 0; background:black; opacity:0.5; color:white; font-size:30px; line-height:100px; text-align:center;}
#next {right:0;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var curIndex=0,
nextIndex=1,
len=$(".topic").length;
//小圆点的点击事件的实现
for(var i=0;i<len;i++){
$("<div></div>").appendTo("#pages");
}
$("#pages div").eq(0).addClass("curr");
//小圆点的点击事件
$("#pages div").click(function(){
if(curIndex===$(this).index()){
return;
}
nextIndex=$(this).index();
move();
});
//上一页
$("#prev").click(function(){
nextIndex=curIndex-1;
if(nextIndex<0){
nextIndex=len-1;
}
move();
});
//下一页
$("#next").click(function(){
move();
});
//运动函数
function move(){
$("#pages div").eq(curIndex).removeClass("curr");
$("#pages div").eq(nextIndex).addClass("curr");
$(".topic").eq(curIndex).fadeOut();
$(".topic").eq(nextIndex).fadeIn();
curIndex=nextIndex;
nextIndex++;
if(nextIndex===len){
nextIndex=0;
}
}
//鼠标移入时停止计时器，移出时开启计时器
$("#container").hover(function(){
clearInterval(time);
},function(){
time=setInterval(move,3000);
}).trigger("mouseleave");
});
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="topic" style="display:block;">
<a href="#"><img src="img/1.jpg" height="284" width="605"></a>
</div>
<div class="topic">
<a href="#"><img src="img/2.jpg" height="284" width="605"></a>
</div>
<div class="topic">
<a href="#"><img src="img/3.jpg" height="284" width="605"></a>
</div>
<div class="topic">
<a href="#"><img src="img/4.jpg" height="284" width="605"></a>
</div>
<div class="topic">
<a href="#"><img src="img/5.jpg" height="284" width="605"></a>
</div>
<div class="topic">
<a href="#"><img src="img/6.jpg" height="284" width="605"></a>
</div>
</div>
<div id="pages"></div>
<div id="prev"><</div>
<div id="next">></div>
</div>
</body>
</html>
以上是关于jquery实现图片轮播淡入淡出效果的主要内容，如果未能解决你的问题，请参考以下文章