이미지 캐러셀 effect_javascript 기술을 달성하기 위한 js

이 글의 예시에서는 이미지 캐러셀 효과를 구현하기 위한 js 코드를 설명하고 참고용으로 공유합니다

실행 코드는 다음과 같습니다

구체적인 코드는 다음과 같습니다

이 플러그인은 jQuery를 기반으로 작성되었습니다. 주요 기능은 자동 재생, 마우스 호버, 왼쪽 및 오른쪽 화살표 클릭 금지입니다.

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 태그에 제목 속성을 추가하는 것이 가장 좋음):

<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="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="/static/imghwm/default1.png"  data-src="images/img-demo3.jpg"  class="lazy" alt=""></a></li>
  </ul>
</div>

JS 스크립트 플러그인:

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

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.