JQuery slidebox實現圖片輪播

      jQuery圖片輪播(焦點圖)插件jquery.slideBox,簡單設置下參數就能夠多個多種動畫效果，左右，上下，速度，還可指定默認顯示第N張，點擊的按鈕在現代瀏覽中能夠實現圓形或圓角效果，插件代碼簡潔，運行效率高,兼容IE6+，Chrome，Firefox，Opera，safari，具備良好用的用戶體驗效果。下面來看下使用方法吧。

      一、引入核心文件

      

      二、html代碼

      

         <div>
            <h3>1、左右輪播，滾動持續0.6秒，滾動延遲3秒，滾動效果swing，初始焦點第1張，點選按鍵自動隱藏，按鍵邊框半徑（IE8-只方不圓）5px（以上各項爲默認設置值）</h3>
            <div id="demo1" class="slideBox">
                <ul class="items">
                    <li><a href="http://www.baidu.com" title="這裏是測試標題一">
                         <img src="public/img/1.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題二">
                          <img src="public/img/2.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題三">
                          <img src="public/img/3.jpg"></a></li>
                </ul>
            </div>
            <h3>2、上下輪播，滾動持續0.3秒，滾動延遲5秒，滾動效果linear，初始焦點第2張，點選按鍵自動隱藏</h3>
            <div id="demo2" class="slideBox">
                <ul class="items">
                    <li><a href="http://www.baidu.com" title="這裏是測試標題一">
                         <img src="public/img/1.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題二">
                          <img src="public/img/2.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題三">
                          <img src="public/img/3.jpg"></a></li>
                </ul>
            </div>
            <h3>3、左右輪播，滾動持續0.3秒，滾動延遲5秒，滾動效果linear，初始焦點第1張，點選按鍵不隱藏，按鍵邊框半徑10px（圓形）</h3>
            <div id="demo3" class="slideBox">
                <ul class="items">
                    <li><a href="http://www.baidu.com" title="這裏是測試標題一">
                         <img src="public/img/1.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題二">
                          <img src="public/img/2.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題三">
                          <img src="public/img/3.jpg"></a></li>
                </ul>
            </div>
            <h3>4、隱藏底欄</h3>
            <div id="demo4" class="slideBox">
                <ul class="items">
                    <li><a href="http://www.baidu.com" title="這裏是測試標題一">
                         <img src="public/img/1.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題二">
                         <img src="public/img/2.jpg"></a></li>
                    <li><a href="http://www.baidu.com" title="這裏是測試標題三">
                         <img src="public/img/3.jpg"></a></li>
                </ul>
            </div>
        </div>

      三、JS代碼

      

       <script>
           $(document).ready(function () {
               $('#demo1').slideBox();
               $('#demo2').slideBox({
                   direction: 'top',//left,top#方向
                   duration: 0.3,//滾動持續時間，單位：秒
                   easing: 'linear',//swing,linear//滾動特效
                   delay: 5,//滾動延遲時間，單位：秒
                   startIndex: 1//初始焦點順序
                 });
                $('#demo3').slideBox({
                    duration: 0.3,//滾動持續時間，單位：秒
                    easing: 'linear',//swing,linear//滾動特效
                    delay: 5,//滾動延遲時間，單位：秒
                    hideClickBar: false,//不自動隱藏點選按鍵
                     clickBarRadius: 10
                   });
                 $('#demo4').slideBox({
                     hideBottomBar: true//隱藏底欄
                   });
          });
       </script>