亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實現(xiàn)圖片輪播效果

 更新時間：2015年12月19日 12:15:21   作者：天空還下著雪  
這篇文章主要介紹了js實現(xiàn)圖片輪播效果的相關(guān)資料,需要的朋友可以參考下

本文實例講解了js實現(xiàn)圖片輪播效果代碼，分享給大家供大家參考，具體內(nèi)容如下

運行代碼如下

具體代碼如下

插件是基于jQuery寫的，主要實現(xiàn)的功能：自動播放、鼠標(biāo)懸停、左右箭頭控制+禁止點擊

CSS樣式：

<style>
  .cooperation-box {
    position: relative;
    height: 91px;
    border-bottom: 1px solid #E0DED9;
    overflow: hidden;
  }
  .cooperation {
    position: relative;
    left: 0;
    height: 50px;
    padding: 20px 0;
  }
  .cooperation li {
    float: left;
    width: 205px;
    text-align: center;
  }
  .cooperation li a {
    display: block;
  }
  .cooperation li img {
    height: 100%;
  }
  .cooperation-box>a {
    display: block;
    position: absolute;
    top: 0;
    z-index: 9;
    width: 22px;
    height: 100%;
    background: #f5f5f5;
    font-family: '宋體';
    font-size: 18px;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    line-height: 91px;
  }
  .cooperation-box>a:hover {
    background: #e5e5e5;
  }
  .cooperation-box .prev {
    left: 0;
    border-right: 1px solid #E0DED9;
  }
  .cooperation-box .next {
    right: 0;
    border-left: 1px solid #E0DED9;
  }
  .cooperation-box .prev.disabled,
  .cooperation-box .next.disabled {
    background: #fbfbfb;
    color: #ddd;
  }
  .cooperation-box .prev.disabled:hover,
  .cooperation-box .next.disabled:hover {
    background: #fbfbfb;
  }
</style>

HTML布局( a標(biāo)簽最好加個title屬性 )：

<div class="cooperation-box">
  <a class="prev" href="javascript:;"><</a>
  <a class="next" href="javascript:;">></a>
  <ul class="cooperation">
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
  </ul>
</div>

JS腳本插件：

<script>
  $.extend({
    /*
     圖片輪播效果
     效果：
     1、自動滾動
     2、鼠標(biāo)懸停
     3、左右控制+禁止點擊
     調(diào)用：$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
     */
    scroll: function(options) {
      // 默認配置
      var defaults = {
        box: '.cooperation-box', // 父容器
         scrollbox: '.cooperation', // ul容器
        time: 1500 // 切換時間
      };

      // 擴展配置
      var conf = $.extend({}, defaults, options);

      // 獲取li的個數(shù)
      var liSize = $(conf.box).find('li').size();

      // 獲取li的寬度
      var liWidth = $(conf.box).find('li:first').width();

      // 定義ul的寬度 
      $(conf.scrollbox).width(liWidth*liSize);

      // 右箭頭初始化(不可點)
      $(conf.box).find('.next').addClass('disabled');

      // 定義一個全局變量index索引變量
      var index = 0;

      // 切換函數(shù)
      function switchFunc() {
        index++;
        if(index > liSize-5) { // 必須有5個顯示在上面
          index=liSize-5;

          // 把滾動過的添加到后面，初始left值為0 index值為0
          var scrolledLi = $(conf.box).find('li:lt('+index+')');
          $(conf.scrollbox).append(scrolledLi);
          $(conf.scrollbox).css('left', 0);
          index = 0;
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.next').removeClass('disabled');
            }
        );
      }

      // 自動播放
      var autoPlay = setInterval(function() {switchFunc();}, conf.time);

      // 鼠標(biāo)浮上暫停
      $(conf.box).mouseover(function() {
        clearInterval(autoPlay);
      });

      // 鼠標(biāo)離開繼續(xù)
      $(conf.box).mouseout(function() {
        autoPlay = setInterval(function() {switchFunc();}, conf.time);
      });

      // 點擊左箭頭
      $(conf.box).find('.prev').click(function() {
        index++;
        if(index >= liSize-5) {
          index=liSize-5;
          $(this).addClass('disabled');
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.next').removeClass('disabled');
            }
        );
      });

      // 點擊右箭頭
      $(conf.box).find('.next').click(function() {
        index--;
        if(index <= 0) {
          index = 0;
          $(this).addClass('disabled');
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.prev').removeClass('disabled');
            }
        );
      });
    }
  });
</script>

頁面調(diào)用：

<script>
  $(function() {
    $.scroll({time: 1500});
  });
</script>

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

相關(guān)文章

最新評論