无缝滚动轮播图

即实现无缝滚动，又拥有普通轮播图的的功能。

无缝滚动原理：

首先声明图片向左滑动的；

1.HTML，开始我们要在轮播图容器内第一张图片前添加我们需要显示图片的最后一张，同样在最后一张的后面添加我们需要显示图片的第一张；

2.CSS，刚开始我们需要显示第一张图片，所以这时就需要设置图片容器的起始位值的CSS样式{left：-544px}

3.JavaScript，我们实时监控图片容器左边相对于轮播图组件的位置的值_left，如果_left大于图片容器的宽度减一张图片的宽度时，也就是滑到了最后一张图片的一瞬间（当然显示的是我们提前添加的，那个我们要显示的第一张图片），这时立即显示我们显示真正要显示的第一张图片。

HTML代码：

<body>
   <div class="banner-slider">
      <div class="slider-wrap">
        <img src="images/3.jpg" alt="">
        <img src="images/0.jpg" alt="">
        <img src="images/1.jpeg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/0.jpg" alt="">
      </div>
      <div class="slider-switch">
        <div class="slider-switch-prev">
          <span><</span>
        </div>
        <div class="slider-switch-next">
          <span>></span>
        </div>
      </div>
      <div class="slider-control">
        <span class="slider-control-item item-active"></span>
        <span class="slider-control-item"></span>
        <span class="slider-control-item"></span>
        <span class="slider-control-item"></span>
      </div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
</body>

CSS代码：

.banner-slider {
  width:544px;
  height: 414px;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
}

.banner-slider .slider-wrap {
  position: absolute;
  top: 0;
  left: -544px;
  width: 3264px;
  height: 414px;
}
.banner-slider .slider-wrap>img{
  display: block;
  float: left;
  width: 544px;
  height: 414px;
}

.banner-slider .slider-switch {
  height: 40px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}

.banner-slider .slider-switch>div {
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,.2);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  position: absolute;
}

.banner-slider .slider-switch .slider-switch-prev{
  left: 0;
  top: 0;
}

.banner-slider .slider-switch .slider-switch-next{
  right: 0;
  top: 0;
}

.banner-slider .slider-control {
  position: absolute;
  width: 100%;
  bottom: 30px;
  left: 0;
  text-align: center;
}

.banner-slider .slider-control>span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px #000;
  margin-right: 15px;
  background-color: rgba(255,255,255,.5);
}

.banner-slider .slider-control .item-active {
  background-color: rgba(37,237,237,.8);
  box-shadow: 0 0 7px #000;
}

JS代码：

$(function(){
  var slider = $('.banner-slider');   //轮播图组件
  var wrap = $('.slider-wrap');  //图片容器
  var images = wrap.children();  //所有的图片
  var imgWidth = images.eq(0).width();  //图片的宽度
  var prevBtn = $('.slider-switch-prev');  //上一页按钮
  var nextBtn = $('.slider-switch-next');   //下一页按钮
  var controls = $('.slider-control>span');   //控制进度的所有小按钮
  var index = 0;  //当前显示的图片，第一张为0
  var speed = 20;   //无缝滚动的时间间隔
  var step = 2;  //无缝滚动的步长，每消耗speed 毫秒，行进的距离
  var autoEnable = true;  //控制自动滚动的开关

//点击进度小按钮

controls.on('click', function(){ index = $(this).index(); getStep(index) });

//点击下一张按钮

nextBtn.on('click', function() { index++; if (index === images.length - 2) { //因为我们添加的两张辅助的图片 index = 0; } getStep(index); }); //点击上一张按钮 prevBtn.on('click', function() { index--; if (index === -1) { index = 3; } getStep(index); }); //显示当前图片的方法，index {param, Number} 当前图片的索引0为第一张 function getStep(index){ wrap.css('left', imgWidth * (index + 1) * -1); controls.removeClass('item-active').eq(index).addClass('item-active'); //更新进度小按钮的样式 _left = -(index+1) * imgWidth; //点击按钮需要更新自动轮播的起始位置 } //图片容器的相对于轮播图组件的绝对位置 var _left = wrap.offset().left; //实现无缝滚动的计时器 var timer = setInterval(function(){ if (autoEnable) { if (-_left > wrap.width()-imgWidth) { _left = -imgWidth; } _left -= step; index = Math.floor(-_left/imgWidth)-1; controls.removeClass('item-active').eq(index).addClass('item-active'); wrap.css('left', _left); } }, speed); //鼠标移入关闭自动滑动 slider.on('mouseover', function() { autoEnable = false; }); //鼠标移出开启自动滑动 slider.on('mouseleave', function() { autoEnable = true; });})

猜你喜欢