<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>javascript