标签：highlight script next ext hover var flow cursor index
自动轮播图已经完成，为方便大家阅览源码如下为方便大家使用，有什么不懂大家可以给我留言
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
}
/*切换按钮*/
.arrow{
width: 50px;
height: 50px;
color: #000;
font-size: 30px;
border-radius:25px ;
background:rgba(255,255,255,0.7);
z-index:2;
top: 145px;
font-weight:bold ;
position: absolute;
text-align: center;
line-height: 46px;
display: none;
}
#prev{
left: 0px;
}
#next{right: 0px;}
.arrow:hover{background:rgba(255,255,255,0.3);color: #4d4f08;}
#box:hover .arrow {display: block;}
/*轮播图部分*/
#box{
width: 900px;
height: 400px;
margin: 0 auto;
position: relative;
border: 1px solid #ccc;
}
#list{
width: 100%;
height: 350px;
float: left;
/*overflow: hidden;*/
cursor: pointer;
}
#list img{
width: 900px;
height: 100%;
float: left;
z-index: 1;
margin-right: -100%;
}
#buttons {
position: absolute;
height: 10px;
width: 100%;
z-index: 2;
bottom: 20px;
}
#buttons ul{
height: 10px;
width: 130px;
margin: 0 auto;
}
#buttons ul li {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 7px;
height: 7px;
border-radius: 50%;
background: #a4a3a3;
margin:3px 6px;
}
#buttons .on{background-color: #e42929;}
#buttons li:hover{background-color: #e42929;}
<div id="box"> <div id="list"> <img src="img/001.jpg" alt="1" style="background-color: #ff0000;"> <img src="img/002.jpg" alt="2" style="background-color: #f05009;"> <img src="img/003.jpg" alt="3" style="background-color: #d8f009;"> <img src="img/004.jpg" alt="4" style="background-color: #09f035;"> <img src="img/005.jpg" alt="5" style="background-color: #05f4f7;"> <img src="img/006.jpg" alt="6" style="background-color: #051cf7;"> </div> <div id="buttons"> <ul> <li index="1" class="on"></li> <li index="2"></li> <li index="3"></li> <li index="4"></li> <li index="5"></li> <li index="6"></li> </ul> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
<script>
$(function(){
$("#list img:gt(0)").hide()
//小圆点
$("#buttons ul li").on("click",function(){
$(this).addClass("on").siblings().removeClass("on")
var TheIndex=$(this).index()
$("#list img").eq(TheIndex).fadeIn(1000).siblings().fadeOut(1000)
})
//左右按钮
var i=[0]
$("#next").on("click",function(){
i++
i=i>5?0:i
console.log(i);
$("#list img").eq(i).fadeIn(1000).siblings().fadeOut(1000);
$("#buttons ul li").eq(i).addClass("on").siblings().removeClass("on");
})
$("#prev").on("click",function(){
i--
i= i<0?5:i
console.log(i);
$("#list img").eq(i).fadeIn(1000).siblings().fadeOut(1000);
$("#buttons ul li").eq(i).addClass("on").siblings().removeClass("on");
})
//定时器功能
$("#box").mouseout(function(){
timer=setInterval(function(){
$("#next").trigger("click");
},2000)
})
$("#box").mousemove(function(){
clearInterval(timer)
})
})
</script>
标签：highlight script next ext hover var flow cursor index
原文地址：http://www.cnblogs.com/sl001/p/7985630.html
