Vue学习—Vue写一个图片轮播组件

野性酷女 2022-03-08 08:08 276阅读 0赞

1、先看效果：

![1069950-20180417205419472-1688516521.png][]

熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。

第一可以给人以一种美观的感受，而不会显得网站那么呆板，

第二可以增加显示内容，同样的区域可以显示更多内容。

2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。

3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放

点击左右箭头切换上一张，下一张图片。

下方小圆点显示当前位第几张图片。

4、使用Vue实现，想法：

5、示例代码

结构html：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

CSS部分：

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

*{
            box-sizing: border-box;
            margin:0;
            padding:0;
          }
          ol,ul{
            list-style: none;
          }
          #slider{
            text-align: center;
          }
          .window{
            position:relative;
            width:600px;
            height:400px;
            margin:0 auto;
            overflow:hidden;
          }
          .container{
            display:flex;
            position:absolute;
          }
          .left, .right{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:50px;
            height:50px;
            background-color:rgba(0,0,0,.3);
            border-radius:50%;
            cursor:pointer;
          }
          .left{
            left:3%;
            padding-left:12px;
            padding-top:10px;
          }
          .right{
            right:3%;
            padding-right:12px;
            padding-top:10px;
          }
          img{
            user-select: none;
          }
          .dots{
              position:absolute;
              bottom:10px;
              left:50%;
              transform:translateX(-50%);
            }
          .dots li{
            display:inline-block;
            width:15px;
            height:15px;
            margin:0 3px;
            border:1px solid white;
            border-radius:50%;
            background-color:#333;
            cursor:pointer;
          }
          .dots .dotted{
            background-color:orange;
          }

![复制代码][copycode.gif]

JavaScript部分：

![复制代码][copycode.gif]

script>
    export default {
      name: 'slider',
      props: {
        initialSpeed: {
          type: Number,
          default: 30
        },
        initialInterval: {
          type: Number,
          default: 3
        }
      },
      data () {
        return {
          sliders:[
            {
              img:'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'
            },
            {
              img:'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
            },
            {
              img:'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
            },
            {
              img:'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'
            },
            {
              img:'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
            },
          ],
          imgWidth:600,
          currentIndex:1,
          distance:-600,
          transitionEnd: true,
          speed: this.initialSpeed
        }
      },
      computed:{
        containerStyle() {
          return {
            transform:`translate3d(${this.distance}px, 0, 0)`
          }
        },
        interval() {
          return this.initialInterval * 1000
        }
      },
      mounted() {
        this.init()
      },
      methods:{
        init() {
          this.play()
          window.onblur = function() { this.stop() }.bind(this)
          window.onfocus = function() { this.play() }.bind(this)
        },
        move(offset, direction, speed) {
          console.log(speed)
          if (!this.transitionEnd) return
          this.transitionEnd = false
          direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600
          if (this.currentIndex > 5) this.currentIndex = 1
          if (this.currentIndex < 1) this.currentIndex = 5
    
          const destination = this.distance + offset * direction
          this.animate(destination, direction, speed)
        },
        animate(des, direc, speed) {
          if (this.temp) {
            window.clearInterval(this.temp);
            this.temp = null ;
          }
          this.temp = window.setInterval(() => {
            if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
              this.distance += speed * direc
            } else {
              this.transitionEnd = true
              window.clearInterval(this.temp)
              this.distance = des
              if (des < -3000) this.distance = -600
              if (des > -600) this.distance = -3000
            }
          }, 20)
        },
        jump(index) {
          const direction = index - this.currentIndex >= 0 ? -1 : 1;
          const offset = Math.abs(index - this.currentIndex) * 600;
          const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
          this.move(offset, direction, jumpSpeed)
        },
        play() {
          if (this.timer) {
            window.clearInterval(this.timer)
            this.timer = null
          }
          this.timer = window.setInterval(() => {
            this.move(600, -1, this.speed)
          }, this.interval)
        },
        stop() {
          window.clearInterval(this.timer)
          this.timer = null
        }
      }
    }
    </script>

文章来源 ：[https://www.cnblogs.com/zhangyongl/p/8870064.html][https_www.cnblogs.com_zhangyongl_p_8870064.html]

[1069950-20180417205419472-1688516521.png]: /images/20220308/36217dc02c0440febca21cb052008eef.png
[copycode.gif]: /images/20220308/315322f16afe42ed883a526bcb60b7b7.png
[ExpandedBlockStart.gif]: /images/20220308/40e608772d8f4fe194eb04626542b69b.png
[https_www.cnblogs.com_zhangyongl_p_8870064.html]: https://www.cnblogs.com/zhangyongl/p/8870064.html