jQurey輪播插件slides簡單使用教程

動態演示地址：

http://www.zqunyan.com/zgproduction/slidesjs/index.html 

簡介就不多說了，網上有很多，復制粘貼沒意義，會想到用這個插件就代表已經了解了這是個什么樣的東東，這里主要記錄下我在使用過程中的步驟和注意事項

html代碼注意輪播的多個元素是同樣的設置和樣式，這樣輪播的時候看起來也不至於忽大忽小的看着不協調，這里只是為方便演示和看懂，不做什么復雜特效誤導群眾

<div id="slides">  
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
</div>

簡單設置下樣式，具體參數可以根據實際情況進行設定，不糾結

#slides{
    width:540px;
    height:350px;
    margin:0 auto;
}
#sildes img{
    width:540px;
    height:300px;
}

下面就是引入主題，把關鍵 js 文件引入進來，這個放頭部和身體里應該都是可以的，我習慣基礎文件放頭部，操作代碼放到身體需要輪播的位置

<script src="jquery.min.js"></script>
<script src="jquery.slides.min.js"></script>

下面是簡單的操作代碼，沒做太多的參數設定，只是讓他自己自動跑起來

<script>  
$(function(){
    $("#slides").slidesjs({
      width:540,
      height:300,
      start: 1,
      play: {
          auto: true
      }
    });
  });
</script>

這樣就能動起來了

效果大概是這樣的

實際運行起來，圖片已經開始輪播了，效果達到了。只是導航看起來還有點別扭，而且還被截斷了，針對slides的導航部分，有一些內部的類是固定的，設定樣式時針對特定部分進行設定就可以了，這里貼上我簡單用到的針對左邊上下頁和右邊標記圖片的數字位置的樣式

.slidesjs-navigation{
    margin-top:10px;
}
a.slidesjs-previous{
    float:left;
    margin-left:20px;
    text-decoration:none;
}
a.slidesjs-next{
    float:left;
    margin-left:20px;
    text-decoration:none;
}
.slidesjs-pagination{
    float:right;
    margin-top:10px;
}
.slidesjs-pagination li{
    float:left;
    margin-left:5px;    
    list-style:none;
}
.slidesjs-pagination li a{
    text-decoration:none;
}
.slidesjs-pagination li a.active{
    color:red;
}

再次運行

這樣看着就舒服些了，左右的文字部分需要的朋友也可以通過背景background-image樣式換成好看的圖片，這里就不作演示了

分析上面的樣式可以看出左邊的文字部分用到的類是 .slidesjs-navigation和 .slidesjs-previous .slidesjs-next

右邊的導航用到的類是 .slidesjs-pagination 然后里面是通過列表標簽控制的 li

更多的控制還有超鏈接 a 的樣式設定等等

 

好了，以上就是簡單的引用，后續如果發現有什么新的注意事項再補充啦……

動態演示地址：

http://www.zqunyan.com/zgproduction/slidesjs/index.html