<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery轮播图</title>
<style>
body,ul,ol,div,img{margin:0;padding:0;}
img{100%;}
ul,ol{list-style:none;}
.btn{40px;height:40px;background:#666;color:#fff;line-height: 40px;text-align:center;}
#main{position:relative;top:0;left:0;600px;height:400px;margin:10px auto;overflow: hidden;}
#tu li{600px;height:400px;display:none;}
#bottom li{margin:5px;display:inline-block;40px;height:40px;text-align:center;line-height:40px;background:#eee;border-radius:50%;}
#prev{position:absolute;top:180px;left:10px;}
#next{position:absolute;top:180px;right:10px;}
</style>
</head>
<body>
<div id="main">
<div id="prev" class="btn"><</div>
<div id="next" class="btn">></div>
<ul id="tu">
<li style="display:block"><img src="images/1.jpg" alt=""></li>
<li><img src="images/0.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
</div>
<ol id="bottom">
<li style="background:red">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script src="jquery-1.8.3.min.js"></script>
<script>
// 从第几张开始
var index=0;
var timer;
function PlayStyle(){
$('#tu li').eq(index).css('display','block').siblings().css('display','none');
$('#bottom li').eq(index).css('background','red').siblings().css('background','#eee');
}
// 循环播放函数
function goToPlay(){
timer=setInterval(function run(){
PlayStyle()
index++;
/*当切换到最后一张图片时,再从头开始*/
if(index>=$('#tu li').length) index=0;
},2000)
}
goToPlay();
// 数字的鼠标事件
$('#bottom li').mouseover(function(){
// 清除定时
clearInterval(timer);
// 获取图片的索引
index=$(this).index();
// 初始化
PlayStyle()
}).mouseout(function(){
goToPlay();
})
// 前进或后退按钮
$('#prev').click(function(){
clearInterval(timer);
//获取显示图片的索引
index -=1;
if(index<0) index=$('#tu li').length-1;
// 初始化
PlayStyle()
})
$('#next').click(function(){
clearInterval(timer);
//获取显示图片的索引
index +=1;
if(index>$('#tu li').length-1) index=0;
// 初始化
PlayStyle()
})
// 图片的鼠标事件
$("#main").mouseover(function(){
// 清除定时
clearInterval(timer);
}).mouseout(function(){
goToPlay();
})
</script>
</body>
</html>