js实现轮播效果几种方式

谁借莪１个温暖的怀抱￠ 2022-04-10 01:19 174阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

轮播呢，也是各种网站上常见的一种展示效果，这里我来写一写实现轮播的一些简单方法。  
//不知道为什么系统吃了代码里面的img标签，大佬们有解决方式么？

## 1.原生js轮播 ##

原生的轮播效果，这里实现的原理：有个一个放置图片列表的块级元素，放置所有的图片，我这里使用的是横向的列表；他的父元素为一个展示块，宽高为一张图片的宽高，利用overflow:hidden属性，每次只展示一张图片，隐藏其他图片，再用js控制图片列表定时或者其他方式左移右移即可实现简单的轮播了。下图图片处为overflow:hidden的父元素，1500\*200为图片列表。

![Image 1][]

image.png

为了让轮播更流畅，在最后一张图片后面插入第一张图片。

![Image 1][]

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 1][]

image.png

然后用js获得图片列表的style.left，使用定时器控制他的偏移量，就可以实现简单的轮播了。

不过光有图片的移动还不够，为了让图片切换更自然一点，可以加入css3对left的过渡。  
不过最后一张切换到第一张时的过渡是相反的，因此还是使用js控制过渡属性。  
从最后一张图片到第一张图片的过渡稍微麻烦一些，我最后使用定时器，让图片滑到最后一张，等过渡动画完成之后，取消过渡动画，切换到第一张之后再开启动画。这部分代码如下

![Image 1][]

image.png

到这里，轮播的功能已经实现了，还可以为它加上几个小圆点，控制轮播现在正在播放的图。  
小圆点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][https_zkhchris.github.io_FE_basic_hc_Carousel_carousel_pure_js.html]

## 2.css3轮播 ##

这里使用css3动画实现了一个渐显渐隐的效果，使用absolute定位，让图片列表中的图片叠加在一起，通过动画控制z-index和透明度实现渐显渐隐。  
absolute元素相对于第一个定位不是static的父元素定位，因此该元素都叠加在一个显示块中。

![Image 1][]

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][https_zkhchris.github.io_FE_basic_hc_Carousel_css3carousel.html]

## 3.vue轮播 ##

使用vue轮播，可以使用列表渲染动态加入想轮播的图片，使用vue自带的列表过渡，可实现轮播效果。  
这里使用非无定位轮播框父元素加上子元素为absolute图片，配合v-show实现轮播效果。  
列表渲染图片

![Image 1][]

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 1][]

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

![Image 1][]

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、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[https_zkhchris.github.io_FE_basic_hc_Carousel_carousel_pure_js.html]: https://link.jianshu.com?t=https://zkhchris.github.io/FE_basic/hc/Carousel/carousel_pure_js.html
[https_zkhchris.github.io_FE_basic_hc_Carousel_css3carousel.html]: https://link.jianshu.com?t=https://zkhchris.github.io/FE_basic/hc/Carousel/css3carousel.html
[2018121912254161]: /images/20220404/e799f76c703b49edace46bb89d33c2b7.png