java轮播_[Java教程]jQuery下的轮播

[Java教程]jQuery下的轮播

0 2016-03-31 23:34:02

以前用js做过轮播 今天用JQ

插件是最基本的 在官网可以下

布局：

• 
• 
• 
• 

• 1
• 2
• 3
• 4

样式：

#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;

}

JQ：

$(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);

})

});

本文网址：http://www.shaoqun.com/a/206770.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0