轮播

<script type="text/javascript">
var t = n = 0, count;

$(document).ready(function(){

count=$("#ban_list a").length;//获取图片数目

$("#ban_list a:not(:first-child)").hide();//除第一张图片都隐藏

$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//这个是把alt里的内容作为标题

$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//给标题绑定点击事件，添加链接

$("#ban li").click(function() { //按钮点击事件

var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4

n = i;

if (i >= count) return;

$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新获取标题

$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件

$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//渐进渐出效果

document.getElementById("ban").style.background="";

$(this).toggleClass("on");//切换按钮样式

$(this).siblings().removeAttr("class");

});

t = setInterval("showAuto()", 4000);

$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

})//鼠标指上停止轮播

function showAuto()//实现轮播的函数

{

n = n >=(count - 1) ? 0 : ++n;

$("#ban li").eq(n).trigger('click');

}

</script>
<div id="ban">
<div id="ban_bg"></div>
<div id="ban_info"></div>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="ban_list">

<a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" /></a>

</div>