jquery---网易轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*全局样式*/
*{padding: 0px;
margin:0px;
}
ul,li{list-style-type: none;}
img{vertical-align: top;}
.box{width:310px;
height:220px;
margin:40px auto;
position:relative;
overflow:hidden;
}
/*content样式*/
.content{width:2180px;
height:210px;
position: absolute;
left:0px;
top:0px;
}
li{float:left;}
.left{position:absolute;
left:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
.right{position:absolute;
right:0px;
top:50%;
width:40px;
height:40px;
background:#ccc;
margin-top: -20px;
text-align: center;
line-height: 40px;
cursor:pointer;
display:none;
}
/*圆圈*/
.circle{width:100%;
height:40px;
position:absolute;
left:0px;
bottom:0px;
background:rgba(255,255,255,0.4);
}
.circle ul{width:100%;
height:40px;
margin-left: 40px;
}
.circle li{width:20px;
height:20px;
border-radius:10px;
background:#000;
margin:8px 5px;
cursor:pointer;
}
.circle .active{background:red;}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="box">
<ul class="content">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="7.jpg" alt=""></li>
</ul>
<div class="left"><<</div>
<div class="right">>></div>
<div class="circle">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

<script type="text/javascript">
var index=0;
var b=0;
var num=0;
var dsq;
$(".box").hover(function(){
$(".left").show();
$(".right").show();
window.clearInterval(dsq);
},function(){
$(".left").hide();
$(".right").hide();
dsq=setInterval("stat()",2000);
});
$(".circle li").mouseover(function(){
index=$(this).index();
b=index;
$(this).addClass("active").siblings().removeClass("active");
abc(index);

});

// 动画函数

function abc(num){
$(".content").stop().animate({"left":-num*310+"px"});
$(".circle li").eq(num).addClass("active").siblings().removeClass("active");

}

//点击右侧函数

$(".right").click(function(){
b++;
if(b>6){
b=0;
}
abc(b);

});

//点击左侧函数

$(".left").click(function(){
b--;
if(b<0){
b=6;
}
abc(b);
});
//定时器函数
$(function(){
dsq=setInterval("stat()",2000);
});
function stat(){
num++;
if(num==7){
num=0;
}
abc(num);
b=num;
}
</script>
</body>
</html>

jquery---网易轮播图

猜你喜欢