首页>>焦点图>>简单的vue幻灯片(2019-04-22)

简单的vue幻灯片

基于 Vue.js 制作的简单幻灯片，包含了自动播放、左右箭头控制、鼠标移入停止自动播放/移出恢复自动播放等基本功能
简单的vue幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div id="freejs">  
  2.         <image-slider class="imageSlider">  
  3.             <div class="imageSlider-nav" @mouseover="stopRotation" @mouseout="startRotation">  
  4.                 <a class="prev fas fa-chevron-left" @click="prev"></a>  
  5.                 <a class="next fas fa-chevron-right" @click="next"></a>  
  6.             </div>  
  7.             <transition-group name="fade" tag="div">  
  8.                 <div class="imageSlider-wrapper" v-for="number in [currentNumber]" :key="number">  
  9.                     <img class="imageSlider-item" :src="images[currentNumber]" @mouseover="stopRotation" @mouseout="startRotation">  
  10.                 </div>  
  11.             </transition-group>  
  12.         </image-slider>  
  13.     </div>  

 

JavaScript Code
  1. new Vue({  
  2.     el: '#freejs',  
  3.     data: {  
  4.         images: [  
  5.             'images/img1.jpg',  
  6.             'images/img2.jpg',  
  7.         ],  
  8.         currentNumber: 0,  
  9.         timer: null  
  10.     },  
  11.     mounted: function () {  
  12.         this.startRotation();  
  13.     },  
  14.     methods: {  
  15.         startRotation: function () {  
  16.             this.timer = setInterval(this.prev, 7000);  
  17.         },  
  18.         stopRotation: function () {  
  19.             clearTimeout(this.timer);  
  20.             this.timer = null;  
  21.         },  
  22.         next: function () {  
  23.             this.currentNumber = this.currentNumber + 1 == this.images.length ? 0 : this.currentNumber += 1  
  24.         },  
  25.         prev: function () {  
  26.             this.currentNumber = this.currentNumber == 0 ? this.images.length - 1 : this.currentNumber -= 1  
  27.         }  
  28.     }  
  29. })// JavaScript Document  

 


原文地址:http://www.freejs.net/article_jiaodiantu_742.html