【實踐】jquery實現滑動動畫及輪播

在做這個之前我已經模仿了一遍大神的輪播動畫做了一次其切換模式就是一張圖片隱藏另一張圖片顯示過渡效果是漸入（fadein），但是目前的動畫切換大多數都是用圖片的左右切換動作的於是在網上看了一些關於這類型的文章然后再結合自己的理解寫了一下。

 

 

先上html代碼

<div id="wrapper">
    <div id="show-area">
      <ul>
        <li id="first"><a href="#"><img src="images/p1.jpg"></a></li>
        <li><a href="#"><img src="images/p2.jpg"></a></li>
        <li><a href="#"><img src="images/p3.jpg"></a></li>
        <li><a href="#"><img src="images/p4.jpg"></a></li>
      </ul>
  </div>
  <div id="controler">
    
  </div>
</div>
<div id="see"></div>

 

 css屬性

這次css屬性有幾個關鍵的部分要留意的

*{
    margin:0px;
    padding:0px;
    border:0px;
}
li{
    list-style-type:none;
}
#wrapper{
    margin:0px auto;
}
#show-area{
    width:800px;/*width 和 height 其實就是圖片的高和寬*/
    height:450px;
    position:relative;
    overflow:hidden;
    margin:100px auto;
}
#show-area ul{
    position:relative;
    width:3200px;
}


#show-area ul li{
    width:800px;
    height:450px;
    float:left;
}
#controler{
    position:absolute;
    width: 150px;
    height: 20px;
    left: 969px;
    top: 530px;
}
#controler div{
    margin-left:.5em;
    float:left;
    height:15px;
    width:15px;
    border-radius:100%;
    background:#ccc;
}
.onclick{
    background:#fff !important;/*在切換時我們利用添加一個類的方法去改變按鈕的背景顏色而，因為按鈕初始狀態下是用id 選擇器設定背景顏色的，所以這里加上一個important*/
}

 

#show-area ul{
    position:relative;
    width:3200px;
}

有必要說一下這段，為什么ul 要加上relative這個屬性呢？在html代碼里面我們可以看見show-area里面包含了一個 ul 以及4個 li 並且show-area這里我設置了overflow:hidden這個屬性，這個圖片左右滾動切換的原理就好像我們小時候玩的游戲：一張有一個洞的大紙片后面放着一條長長的紙片我們可以隨意地拉動后面的長紙片使它的內容在前面的大紙片的洞里面顯示而除了顯示區域外的內容給我們就 hidden了它們了。

 

 

jquery代碼

$(function(){
    var currentIndex = 0;
    var imgtotal = $("#show-area ul li").length;
    var autoPlayIndex = 0;
    var imgwidth = $("#show-area ul li").width();//獲取第一個li的長度用作動畫切換效果
    
    
    //通過循環更具圖片數量自動添加控制按鈕方便以后后台上傳圖片所用
    for(var i = 0 ; i<imgtotal ; i++){
        
        $("#controler").append("<div>" + "</div>");
    };
    
    
    $("#controler div").eq(0).addClass("onclick");
    $("#controler div").each(function() {
        $(this).click(function(){
            autoPlayIndex = $(this).index();//為模擬點擊索引值賦值
            Change(this);
        });
    });
    function Change(obj){
          currentIndex = $(obj).index();
        $("#show-area ul").animate({left:-currentIndex * imgwidth},800);//這里就是切換的部分了當我按地一個按鈕的時候它的左屬性是沒有變化的，而當我按第二個按鈕的時候（第二個按鈕的索引值是1）ul 的left屬性就會減少第1個圖片的寬度也就是向左面縮800px，這樣第二張圖片就顯示出來啦，之后的也是如此，這就是為什么要設置ul 屬性為relative的意義，並且ul 里面的 li 也要設置為左浮動這樣才會有效果
        $("#controler div").eq(currentIndex).addClass("onclick").siblings().removeClass("onclick");
    }
    
    var auto = setInterval(function(){
          autochange();
        },6000);
        
    function autochange(){
        autoPlayIndex = (autoPlayIndex + 1) % imgtotal;
        $("#controler div").eq(autoPlayIndex).trigger("click");
    };
    
    $("#show-area li,#controler div").mouseover(function(){
        clearInterval(auto);
          
    }).mouseout(function(){
        auto = setInterval(function(){
          autochange();    
        },6000)
        
    })
});