小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

輪播呢，也是各種網站上常見的一種展示效果，這裡我來寫一寫實現輪播的一些簡單方法。
//不知道為什麼系統吃了程式碼裡面的img標籤，大佬們有解決方式麼？

1.原生js輪播

原生的輪播效果，這裡實現的原理：有個一個放置圖片列表的塊級元素，放置所有的圖片，我這裡使用的是橫向的列表；他的父元素為一個展示塊，寬高為一張圖片的寬高，利用overflow:hidden屬性，每次只展示一張圖片，隱藏其他圖片，再用js控制圖片列表定時或者其他方式左移右移即可實現簡單的輪播了。下圖圖片處為overflow:hidden的父元素，1500*200為圖片列表。

image.png

為了讓輪播更流暢，在最後一張圖片後面插入第一張圖片。

image.png

.box{
  width:300px;
  height:200px;
  margin:100px auto;
  overflow: hidden;
}
.img-g{
  width:1500px;
  height:200px;
}
.img-g img{
  width:300px;
  height:200px;
}

將圖片列表position設為relative，就可以利用偏移來移動圖片了，為了方便，這裡將left屬性內聯到img-g裡。
如left為-100px時

image.png

然後用js獲得圖片列表的style.left，使用定時器控制他的偏移量，就可以實現簡單的輪播了。

let p=document.getElementsByClassName('img-g')[0];
let timer=setInterval(move,2000);
function move(){
  if(parseInt(p.style.left)>-1200){
    p.style.left=parseInt(p.style.left)-300+'px'
    console.log(p.style.left)
  }else{
    p.style.left='-300px'
  }
}
 

不過光有圖片的移動還不夠，為了讓圖片切換更自然一點，可以加入css3對left的過渡。
不過最後一張切換到第一張時的過渡是相反的，因此還是使用js控制過渡屬性。
從最後一張圖片到第一張圖片的過渡稍微麻煩一些，我最後使用定時器，讓圖片滑到最後一張，等過渡動畫完成之後，取消過渡動畫，切換到第一張之後再開啟動畫。這部分程式碼如下

image.png

let p=document.getElementsByClassName('img-g')[0];
let timer=setInterval(move,2000);
function move(){
  if(parseInt(p.style.left)>-1200){
    p.style.left=parseInt(p.style.left)-300+'px'
    p.style.transition='left 1s';
    if(parseInt(p.style.left)<=-1200){
        console.log('t')
        setTimeout(function(){
          p.style.left='0px'
          p.style.transition='left 0s';
        },1000)
    }
  }else{
    p.style.left='0px'
    p.style.transition='left 0s';
  }
}

到這裡，輪播的功能已經實現了，還可以為它加上幾個小圓點，控制輪播現在正在播放的圖。
小圓點html

<div class='button-g'>
      <span data-index='0' ></span>
      <span data-index='1'></span>
      <span data-index='2'></span>
      <span data-index='3'></span>
    </div>
.button-g{
  position:relative;
  top:-20px;
  text-align:center;
}
.button-g span{
  display:inline-block;
  position:relative;
  z-index:10;
  width:10px;
  height:10px;
  margin:0 5px;
  border-radius:100%;
}

小圓點被點選時，圖片滑動至小圓點對應的圖片，並且圖片滑動時小圓點也跟著變化，我在每個小圓點屬性中加入了data-屬性，該屬性可被js獲取。
為小圓點加入事件，被點選時滑動對應的偏移量。

for(let i=0;i<button.length;i++){
  button[i].onclick=function(){
    p.style.left=-300*this.getAttribute('data-index')+'px'
    tog(this.getAttribute('data-index'))
  }
}

function tog(index){
  if(index>3){tog(0);return;}
  for(let i=0;i<button.length;i++){
    button[i].style.backgroundColor='#eee'
  }
  button[index].style.backgroundColor='rgb(215, 81, 15)';
}

常見的輪播還有一種效果，就是滑鼠只在圖片上的時候，暫停輪播；滑鼠離開時繼續輪播。
以這種思路，很容易實現想要的效果。

p.onmouseover=function(){
  clearInterval(window.timer)
}
p.onmouseout=function(){
  window.timer=setInterval(move,3000);
}

實際效果可以看下面連結：
https://zkhchris.github.io/FE_basic/hc/Carousel/carousel_pure_js.html

2.css3輪播

這裡使用css3動畫實現了一個漸顯漸隱的效果，使用absolute定位，讓圖片列表中的圖片疊加在一起，通過動畫控制z-index和透明度實現漸顯漸隱。
absolute元素相對於第一個定位不是static的父元素定位，因此該元素都疊加在一個顯示塊中。

image.png

然後使用css3動畫按時間迴圈改變他們的透明度和z-index，即可完成簡單的輪播效果。
這裡每張圖片佔用的動畫時間為4s，總動畫時間即為16s。淡入淡出都是1s，佔用總時間約為6%，在最頂層的時間為3s，佔用總時間18.7%；按此比例設定keyframe

.imglist img{
  width:300px;
  height:200px;
  position:absolute;
  animation: show 16s infinite;
}
@keyframes show{
  0%{
    opacity:0;
    z-index:2;
  }
  6%,25%{
    opacity:1;
    z-index: 1;
  }
  31%,100%{
    opacity:0;
    z-index:0;
  }
}

這時圖片都可以按時間迴圈出現，不過他們現在是同時出現，同時消失的，為圖片加上延時即可完成效果。

#img2{
    animation-delay: 0s;
}
#img2{
    animation-delay: 4s;
}
#img3{
    animation-delay: 8s;
}
#img4{
    animation-delay: 12s;
}

css3輪播可實現輪播效果，但是沒有辦法控制現在要播哪張圖片，因此儘量使用js控制輪播效果。
https://zkhchris.github.io/FE_basic/hc/Carousel/css3carousel.html

3.vue輪播

使用vue輪播，可以使用列表渲染動態加入想輪播的圖片，使用vue自帶的列表過渡，可實現輪播效果。
這裡使用非無定位輪播框父元素加上子元素為absolute圖片，配合v-show實現輪播效果。
列表渲染圖片

<template>
    <div id='swiper_img_box'>
    <ul class='swiper_img_ul'>

image.png

    </ul>
        <ul class='buttonG'>
        <span v-for='(img,index) in imgs' :key='index' ></span>
        </ul>
    </div>
</template>

<style>
  .swiper_img_ul{
    height:300px;
  }
  .swiper_img_ul img{
    position:absolute;
  }
  #swiper_img_box{
    position:relative;
    width:300px;
    height:300px;
    overflow:hidden;
  }
  .buttonG{
    position:absolute;
    bottom:0;
  }
  .circle{
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:100%;
    margin-left:10px;
  }
</style>

使用v-show來控制圖片是否顯示，在使用定時器來定時修改當前顯示的圖片,定時器掛在了mounted上。

image.png

  mounted:function(){
    this.timer=setInterval(this.changeIndex,2000)
    },
  methods:{
    changeIndex(){
      if(this.showIndex>=this.imgs.length-1){
        this.showIndex=0
      }else{
        this.showIndex++
      }
    }

  data () {
    return {
      imgs:[
            {
            src:'../../dist/7.gif',
            alt:'1'
            },{
            src:'../../dist/home_06.gif',
            alt:'2'
            },{
            src:'../../dist/home_08.gif',
            alt:'3'
            },{
            src:'../../dist/home_12.gif',
            alt:'4'
            }
          ],
          showIndex:0
    }
    },

這樣，通過定時器，可以控制圖片的輪播了，但是沒有過渡效果，輪播很突兀,加上過渡效果就好了。

<transition-group name='image' tag="ul" class='swiper_img_ul'>

  .image-enter-active {
            transform: translateX(0);
            transition: all 1s ease;
        }

  .image-leave-active {
            transform: translateX(-100%);
            transition: all 1s ease;
        }

  .image-enter {
            transform: translateX(100%)
        }

  .image-leave {
            transform: translateX(0)
                }

在加上常見的滑鼠mouseover暫停，mouseout繼續，點選按鈕輪播至所點選按鈕對應的圖片。

<transition-group name='image' tag="ul" class='swiper_img_ul'>
        <img  ...... @mouseover='stop' @mouseout='start'>
    </transition-group>
        <ul class='buttonG'>
        <span ...... @click='goto(index)'></span>
       </ul>

  methods:{
    changeIndex(){
      if(this.showIndex>=this.imgs.length-1){
        this.showIndex=0
      }else{
        this.showIndex++
      }
    },
    stop(){
      console.log('1')
      clearInterval(this.timer)
    },
    start(){
      this.timer=setInterval(this.changeIndex,2000)
    },
    goto(i){
      this.showIndex=i
      this.stop()
      this.start()
    }
  }

這時輪播效果就實現的差不多了，不過這個vue輪播我是寫成了單檔案元件的形式，無法預覽，就在下方貼上這個程式碼。

謝謝大家閱讀，希望大佬們多多指點。

swiper.vue

<template>
    <div id='swiper_img_box'>

image.png

        <ul class='buttonG'>
        <span v-for='(img,index) in imgs' :key='index' :class="[index==showIndex ? 'color' : 'white', 'circle']" @click='goto(index)'></span>
        </ul>
    </div>
</template>
<script>
export default{
  name:'swiper',
  data () {
    return {
      imgs:[
            {
            src:'../../dist/7.gif',
            alt:'1'
            },{
            src:'../../dist/home_06.gif',
            alt:'2'
            },{
            src:'../../dist/home_08.gif',
            alt:'3'
            },{
            src:'../../dist/home_12.gif',
            alt:'4'
            }
          ],
          showIndex:0
    }
    },
  mounted:function(){
    this.timer=setInterval(this.changeIndex,2000)
    }
,
  methods:{
    changeIndex(){
      if(this.showIndex>=this.imgs.length-1){
        this.showIndex=0
      }else{
        this.showIndex++
      }
    },
    stop(){
      clearInterval(this.timer)
    },
    start(){
      this.timer=setInterval(this.changeIndex,2000)
    },
    goto(i){
      this.showIndex=i
      this.stop()
      this.start()
    }
  }
}
</script>
<style>
  .swiper_img_ul{
    height:300px;
  }
  .swiper_img_ul img{
    position:absolute;
  }
  #swiper_img_box{
    position:relative;
    width:300px;
    height:300px;
    overflow:hidden;
  }
  .buttonG{
    position:absolute;
    bottom:0;
  }
  .circle{
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:100%;
    margin-left:10px;
  }
  .white{
    background-color:#fff;
  }
  .color{
    background-color:#f00;
  }
  .image-enter-active {
            transform: translateX(0);
            transition: all 1s ease;
        }

  .image-leave-active {
            transform: translateX(-100%);
            transition: all 1s ease;
        }

  .image-enter {
            transform: translateX(100%)
        }

  .image-leave {
            transform: translateX(0)
                }
</style>

連結：https://www.jianshu.com/p/5e47aae71fe0

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！