<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>漸變式輪播</title>
<style>
*{
margin:?0;
padding:?0;
}
li{
list-style:?none;
}
a{
text-decoration:?none;
}
#carousel{
width:?310px;
height:?206px;
overflow:?hidden;
position:?relative;
}
#carousel?.img-ct{
position:?relative;
}
#carousel?.img-ct?li{
position:?absolute;
display:?none;
}
#carousel?.img-ct?img{
width:?310px;
height:?206px;
}
#carousel?.arrow{
position:?absolute;
top:?50%;
width:?30px;
height:?30px;
margin-top:?-15px;
line-height:?30px;
text-align:?center;
background:?#4E443C;
color:?#fff;
border-radius:?30px;
box-shadow:?0?0?2px?#999;
opacity:?0.8;
}
#carousel?.arrow:hover{
opacity:?1;
}
#carousel?.pre{
left:?10px;
}
#carousel?.next{
right:?10px;
}
#carousel?.bullet{
position:?absolute;
bottom:?10px;
left:?50%;
transform:?translateX(-50%);
}
#carousel?.bullet?li{
width:?16px;
height:?4px;
background:?#fff;
display:?inline-block;
border-radius:?2px;
cursor:?pointer;
}
#carousel?.bullet?.active{
background:?#666;
}
</style>
</head>
<body>
<div?id="carousel">
<ul?class="img-ct">
<li><a?href=""><img?src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg"?alt=""></a></li>
<li><a?href=""><img?src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg"?alt=""></a></li>
<li><a?href=""><img?src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg"?alt=""></a></li>
<li><a?href=""><img?src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg"?alt=""></a></li>
</ul>
<a?class="pre?arrow"?href="#"><</a>
<a?class="next?arrow"?href="#">></a>
<ul?class="bullet">
<li?class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script?src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var?ct=$(".img-ct"),
items=ct.children(),
pre=$(".pre"),
next=$(".next"),
bullet=$(".bullet"),
imgWidth=items.width(),
imgCount=ct.children().length;
var?curIdx=0;
var?isAnimate=false;
next.on("click",function(){
playNext();
});
pre.on("click",function(){
playPre();
});
bullet.find("li").on("click",function(){
var?idx=$(this).index();
play(idx);
});
function?playNext(){
play((curIdx+1)%imgCount)
}
function?playPre(){
play((imgCount+curIdx-1)%imgCount)
}
function?play(idx){
if(isAnimate)?return;
isAnimate=true;
items.eq(curIdx).fadeOut(500);
items.eq(idx).fadeIn(500,function(){
isAnimate=false;
});
curIdx=idx;
setBullet();
}
play(0);
function?setBullet(){
bullet.children().removeClass("active").eq(curIdx).addClass("active");
}
function?autoPlay(){
setInterval(function(){
playNext();
},2000)
}
autoPlay();
</script>
</body>
</html>同學請看以下,這個是輪播代碼,但是我對函數play()里面的idx和curIdx之間的關系搞暈了.可有同學幫我理理這之間的邏輯關系?萬分感謝
JQuery寫輪播問題
咩咩咩3124927
2016-11-11 15:38:51
