jQuery下的轮播

以前用js做过轮播今天用JQ
插件是最基本的在官网可以下

布局：
<body>
<div id="div1">
<ul id="lunbo">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>

</ul>
<ul id="ul1">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
样式：
<style style="text/css">
#div1{
position:absolute;
width:400px;
height:200px;
border:1px solid red;
margin-left:300px;
overflow:hidden;
}
#lunbo{
position:absolute;
margin-left:-40px;
margin-top:0px;
}
#lunbo li{
display:none;
}

li{
list-style:none;
float:left;
}
img{
width:400px;
height:200px;
float:left;
position:absolute;
z-index:-1;
}
#ul1{
margin-left:80px;
margin-top:150px;

}
#ul1 li{

list-style:none;
width:20px;
height:20px;
border-radius:50%;
background-color:blue;
text-align:center;
margin-left:10px;
}
#ul1 .active{
background-color:yellow;

}
</style>
JQ：
<script>
$(function(){
//自动轮播利用定时器实现，
//定时器的回调函数中利用角标每次自增(index) ，（数字下表和图片的角标是相同的）
//让$("#lunbo li")角标也为index的元素显示同时其同胞元素隐藏
//为ul1中的角标为index的li添加active样式同时去除其它同辈元素active的样式
$("#lunbo li").eq(0).show();

index=0;
t=setInterval(lunbo,1000);

function lunbo(){
index++;
if(index>=$("#lunbo li").length){index=0;}
$("#lunbo li:eq("+index+")").show().siblings().hide();
$("#ul1 li:eq("+index+")").addClass("active").siblings().removeClass("active");

}

//手动轮播为$("#ul1 li")绑定鼠标移入事件
//获取当前$("#ul1 li")的下标
//让$("#lunbo li")角标也为index的元素显示同时其同胞元素隐藏
//为ul1中的角标为index的li添加active样式同时去除其它同辈元素active的样式
$("#ul1 li").mouseover(function(){
index=$("#ul1 li").index(this);
$("#lunbo li:eq("+index+")").show().siblings().hide();
$("#ul1 li:eq("+index+")").addClass("active").siblings().removeClass("active");
})

//鼠标移入时清除定时器移出时重新自动轮播
$("#div1").hover(function(){
clearInterval(t);
},function(){
t=setInterval(lunbo,2000);

})
});
</script>

巴特西

jQuery下的轮播

最新文章

热门文章