js to achieve image carousel effect_javascript skills

The example in this article explains the js code to achieve the image carousel effect and shares it with you for your reference. The specific content is as follows

The running code is as follows

The specific code is as follows

The plug-in is written based on jQuery, and its main functions are: automatic playback, mouse hover, left and right arrow control + click prohibition

CSS style:

<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 layout (it is best to add a title attribute to the a tag):

<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 plug-in:

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

Page call:

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

I hope this article will be helpful to everyone in learning javascript programming.