網上看的輪播代碼

<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

相關文章
相關標籤/搜索