Jquery实现简单的轮播效果(代码管用)

废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：

1
2
3
4



 

*{margin:0;padding: 0;border: none;list-style: none}

.main{
width: 1024px;
height: 320px;
margin: 0 auto;
position: relative;
}
.main a{
position: absolute;
}
.main a img{
width: 100%;
height: 320px;
}

.main ul li.selected{
background: #f97157;
}
.main ul{
position: absolute;
z-index: 999;
top: 120px;
left: 20px;
}
.main ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #909090;
cursor: pointer;
text-align: center;
} 


var t=null;
var n=0;
var count;

$(function(){
count=$(".main a").length;

$(".main a:not(:first-child)").hide();

$(".main ul li").click(function(){
var index=$(this).text()-1;
n=index;
console.log(n);

$(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);

$(this).addClass("selected");

$(this).siblings().removeClass("selected");
});

t=setInterval("autoMove()",3000);

$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});

function autoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}

$(".main ul li").eq(n).trigger("click");
}

以上所述是小编给大家介绍的Jquery实现简单的轮播效果，希望对大家有所帮助！