网站轮播图 太耳熟的词了  基本上做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');

}