轮播图定时器翻页-jQuery方法
纠结死了的东西，留着以后备用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>DOM学习</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style: none;}
a{ text-decoration: none; coor: #000;}
.fl{ float:left;}
.fr{ float:right;}
.navBar { width: 800px; height: 100%; overflow: hidden; border: 1px solid #ccc; margin: 0 auto; margin-top:10px;}
.navBar .navBar_btn { width: 800px; height: 25px; line-height: 25px; }
.navBar .navBar_btn ul li { float:left; display: block; height: 25px; padding: 0 20px; background: red; margin-right:5px;}
.navBar .navBar_btn ul li.active{ background: #ccc;}
.navBar .navBar_btn ul li a { text-decoration: none; color: #fff;}
.navBar .navBar_con { position:relative; width: 800px; height: 300px; overflow: hidden;}
.navBar .navBar_con ul li{ display:block; float:left; width:800px; height: 300px;}
.Pbtn{ position:absolute;top:100px; width:780px; padding:0 10px;font-size:24px; font-family:Microsoft YaHei; color: #000;}
.Pbtn span{ cursor: pointer;}
</style>
<script type="text/javaScript" src="jquery-1.7.2.js"></script>
<script type="text/javaScript">
$(function(){
var box=$(".navBar");
var btn=$(".navBar_btn li"); //获取按钮LI
var con=$(".navBar_con li"); //获取内容li
var iNow=0; // 遍历初始值
var timer= null; //定时器
var btns=btn.length; //按钮个数
var cons=con.length; //图标个数
//绑定按钮鼠标事件
btn.mouseover(function(){
iNow=$(this).index();
showpic();
});
//下一张上一张
$(".next").click(function(){
iNow+=1;
if(iNow==btns){
iNow=0;
}
showpic();
});
$(".prev").click(function(){
iNow-=1;
if(iNow == -1){
iNow=cons-1;
}
showpic();
});
function show(){
timer=setInterval(function(){
iNow++;
if(iNow>btns){
iNow=0;
}
showpic(iNow);
},300);
};
show();
//自动播放
$(".navBar").hover(function(){
clearInterval(timer);
},function(){
show();
}).tigger("mouseleave");
function showpic(index){
btn.eq(iNow).addClass("active").siblings().removeClass("active");
con.eq(iNow).show().siblings().hide();
};
});
</script>
</head>
<body>
<div class="navBar">
<div class="navBar_btn">
<ul>
<li class="active"><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
</ul>
</div>
<div class="navBar_con">
<ul>
<li>111111111111111111111111</li>
<li>222222222222222</li>
<li>3333333333333333333333</li>
<li>44444444444444444444444</li>
</ul>
<div class="Pbtn"><span class="fl prev">-</span><span class="fr next">+</span></div>
</div>
</div>
</body>
</html>
