使用jq深入研究轮播图特性

网站轮播图 太耳熟的词了  基本上做pc端的 主页绝壁会来一个轮播图的特效

轮播图他一个页面页面的切换，其实的原理是通过css的定位 ，定位到一起，第一张首先显示，其余默认隐藏。

今天我实现的这个轮播仅是一个下面带数字的简单轮播，先搭好框架，以后遇到实际项目可根据这个的原有的基础上，进行调试

第一步

写好html

<div id="banner">

<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" /></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" /></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" /></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" /></a>
</div>
</div>

第二步写好对应的css

#banner {position:relative; width:478px; height:286px; overflow:hidden;}
#banner ul {position:absolute;list-style-type:none; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li {float:left;width: 10px;height: 10px;;
display:block;color:#FFF;border:#e5eaff 1px solid;background:red;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;}

下面即是javascript的内容了

var t = n = 0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner li").click(function() {
var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

function showAuto()
{
n = n >=(count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}