無縫滾動輪播圖

阿新 • • 發佈：2019-01-16

即實現無縫滾動，又擁有普通輪播圖的的功能。

無縫滾動原理：

首先宣告圖片向左滑動的；

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; });})

無縫滾動輪播圖

無縫滾動輪播圖（3）

原生javascript寫的無縫滾動輪播圖

無縫滾動輪播圖

原生js實現無縫滾動輪播圖（移動端）-自動輪播

JS實現無縫滾動輪播圖的原理

簡單的左右滾動輪播圖

面向對象無縫滾動輪播(附帶面向過程代碼)

vue慕課網音樂項目手記：5-手寫滾動輪播圖（上）

橫向滾動輪播圖

史上最簡單的無縫銜接輪播圖

無縫切換輪播圖

web前端技術課程講解之關於輪播圖水平無縫滾動

【原生js】詳解輪播圖之無縫滾動

輪播圖--無縫滾動

jQuery輪播圖之上下無縫滾動

（原生JS）圖片無縫滾動、圖片轉化、輪播圖、摺疊效果

JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

jQuery----無縫輪播圖

原生JavaScript實現無縫輪播圖

無縫輪播圖

無縫滾動輪播圖

相關推薦