<!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"),
imgCount=ct.children().length;
var?iNow=0;
var?timer=null;
function?firstImg(){
items.eq(0).fadeIn(500).siblings().fadeOut(500);
}
firstImg();
bullet.find("li").on("click",function(){
var?idx=$(this).index();
iNow=idx;
$(this).addClass("active").siblings().removeClass("active");
items.eq(iNow).fadeIn(500).siblings().fadeOut(500);
});
timer=setInterval(function(){
iNow++;
if(iNow>=imgCount){
iNow=0;
}
bullet.children().eq(iNow).trigger("click");
},2000);
pre.on("click",function(){
});
next.on("click",function(){
});
</script>
</body>
</html>請幫我把這個輪播圖的左右箭頭功能幫我添加出來,我實在想不出來!謝謝各位
?jQuery輪播問題
咩咩咩3124927
2016-11-12 15:55:30
