欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue如何實現(xiàn)圖片輪播組件

小編這次要給大家分享的是Vue如何實現(xiàn)圖片輪播組件，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設、綠園網(wǎng)站維護、網(wǎng)站推廣。

1、先看效果：

Vue如何實現(xiàn)圖片輪播組件

熟悉的圖片輪播，只要是個網(wǎng)站，百分之90以上會有個圖片輪播。我認為使用圖片輪播。

第一可以給人以一種美觀的感受，而不會顯得網(wǎng)站那么呆板，

第二可以增加顯示內(nèi)容，同樣的區(qū)域可以顯示更多內(nèi)容。

2、每學一個新東西 ，圖片輪播都是很好的練手案例，而且，也很實用。

    3、基本要求：頁面加載，自動播放。鼠標懸停，停止播放。鼠標離開，繼續(xù)播放

點擊左右箭頭切換上一張，下一張圖片。

下方小圓點顯示當前位第幾張圖片。

4、使用Vue實現(xiàn)　　　　

5、示例代碼

結構html：

<template>
 <div id="slider">
  <div class="window" @mouseover="stop" @mouseleave="play">
   <ul class="container" :>
    <li>
     <img : :src="sliders[sliders.length - 1].img" >
    </li>
    <li v-for="(item, index) in sliders" :key="index">
     <img : :src="item.img" >
    </li>
    <li>
     <img : :src="sliders[0].img" >
    </li>
   </ul>
   <ul class="direction">
    <li class="left" @click="move(600, 1, speed)">
     <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
    </li>
    <li class="right" @click="move(600, -1, speed)">
     <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
    </li>
   </ul>
   <ul class="dots">
    <li v-for="(dot, i) in sliders" :key="i"
    :class="{dotted: i === (currentIndex-1)}"
    @click = jump(i+1)
    >
    </li>
   </ul>
  </div>
 </div>
</template>

CSS部分：

*{
    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;
   }

JavaScript部分：

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 &#63; 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 &#63; -1 : 1;
   const offset = Math.abs(index - this.currentIndex) * 600;
   const jumpSpeed = Math.abs(index - this.currentIndex) === 0 &#63; 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>

看完這篇關于Vue如何實現(xiàn)圖片輪播組件的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

當前標題：Vue如何實現(xiàn)圖片輪播組件
本文網(wǎng)址：http://chinadenli.net/article18/pgppdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、服務器托管、微信小程序、小程序開發(fā)、建站公司、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化