輕松實現javascript圖片輪播特效

更新時間：2016年01月13日 11:14:54 作者：秋恨雪

這篇文章主要幫助大家輕松實現javascript圖片輪播特效，點擊標簽還可以實現圖片切換，感興趣的小伙伴們可以參考一下

本文實例介紹了javascript圖片輪播特效的詳細代碼以及實現思路，分享給大家供大家參考，具體內容如下

還是先來看一看效果圖：

具體代碼：

一、HTML代碼分析

<body> 
  <div class="dota"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/1.jpg"/></a></li> 
      <li><a href="#"><img src="images/2.jpg"/></a></li> 
      <li><a href="#"><img src="images/3.jpg"/></a></li> 
      <li><a href="#"><img src="images/4.jpg"/></a></li> 
      <li><a href="#"><img src="images/5.jpg"/></a></li> 
    </ul> 
    <ul id="indicator"> 
      <li class="current"><a href="#">A版是一款手機DOTA應用，它涵蓋了</a></li> 
      <li><a href="#">A版是一款手機應用，它涵蓋了</a></li> 
      <li><a href="#">A版是一款手機應用，它涵蓋了</a></li> 
      <li><a href="#">A版是一款手機應用，它涵蓋了</a></li> 
      <li><a href="#">A版是一款手機應用，它涵蓋了</a></li> 
    </ul> 
  </div> 
</body>

此效果的層次結構比較清楚：
1. class為data的div是最外層的容器，可以用來控制整個效果圖顯示的位置。

2. id為content的ul用來存放左側滾動的圖片。

3. id為indicator的ul用來顯示右側的指示欄。

二、CSS代碼

*{margin: 0; padding: 0;} 
 
    img{ 
      border:0; 
    } 
 
    .dota{ 
      width:570px; 
      height: 230px; 
      margin:100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
 
    .dota #content{ 
      float: left; 
      list-style: none; 
      position: absolute; 
      width:380px; 
      height:230px; 
    } 
    .dota #content img{ 
      width:380px; 
      height:230px;  
    } 
    .dota #indicator{ 
      float: right; 
      list-style: none; 
      width:180px; 
      height:220px; 
      padding: 5px; 
      background-color: #100F13; 
    } 
    .dota #indicator li{ 
      width: 180px; 
      height: 44px; 
      background: url(images/anniu.png) 0 -44px; 
    } 
 
    .dota #indicator li.current{ 
      background-position: 0 0; 
    } 
 
    .dota #indicator li a{ 
      display: block; 
      width: 160px; 
      height: 34px; 
      padding: 5px 0 5px 25px; 
    } 
 
    .dota #indicator li a:link , .dota #indicator li a:visited{ 
      text-decoration: none; 
      color: #686477; 
      font: 12px/145% "宋體"; 
    }

這里，我對indicator中l(wèi)i的代碼進行說明：
.dota #indicator li中的css代碼就是設置右側指示欄中的每一項，注意到，這里使用了background屬性，也就是說li的背景是一張圖片。準備好的圖片如下：

這張準備好的圖片大小為 180 * 88，而.dota #indicator li中的background屬性設置的position屬性大小為 0 -44px, 即截取的圖片的下半部分；所以indicator中所有的背景圖片顯示的是下半部分比較暗的部分；而.dota #indicator li.current 的position屬性大小為 0 0，所以默認情況下indicator的第一個顯示高亮，其余的顯示為暗黑的那部分。然后通過JQuery代碼控制current屬性作用在 "誰" 身上來切換選中狀態(tài)。

三、JQuery代碼

<script type="text/javascript"> 
 
    $(function(){ 
 
      var nowImage = 0; 
 
      /* 為定時動畫服務 */ 
      $(".dota #content li").first().clone().appendTo($(".dota #content")); 
 
      var timer = setInterval(autoAnimate, 1500); 
 
      $(".dota").mouseenter(function(){ 
        clearInterval(timer); 
      }).mouseleave(function(){ 
        timer = setInterval(autoAnimate, 1500); 
      });; 
 
      $(".dota #indicator li").mouseenter(function(){ 
        $(this).addClass("current").siblings().removeClass("current"); 
        nowImage = $(this).index(); 
        /*stop() 可以立刻清楚以前的動畫，防止動畫疊加*/ 
        $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
      }); 
 
      function autoAnimate(){ 
        if(nowImage == 4){ 
          nowImage = 0; 
           
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          $(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){ 
            $(".dota #content").css("top",0); 
          }); 
        } 
        else{ 
          nowImage++; 
          $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          } 
      } 
 
    }); 
 
  </script>

以上就是輕松實現javascript圖片輪播特效的詳細代碼，希望對大家的學習有所幫助。

您可能感興趣的文章: