js实现图片轮播效果

<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>

<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>

<script>  $.extend({    /*     图片轮播效果     效果：     1、自动滚动     2、鼠标悬停     3、左右控制+禁止点击     调用：$.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的个数      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;      // 切换函数      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);      // 鼠标浮上暂停      $(conf.box).mouseover(function() {        clearInterval(autoPlay);      });      // 鼠标离开继续      $(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>

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