vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。

父：

<template>
 <div id="app">
 <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
 <template scope="props">-----使用子组件传过来的值，封装slot
 <div class="articleList-box-photo ">
 <div class="tu imageEffectsAnimate imageEffects_Magnifier">
 <a>
 <img class="minMax" :src="props.item.img">
 </a>
 </div>
 </div>
 <div class="articleList-box-title">
 <div class="title">
 <a class="textleft">{{props.item.title}}</a>
 </div>
 </div>
 </template>
 </er-carousel-index>
 </div>
</template>
<script>
 import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
 export default {
 name: 'app',
 data() {
 }
 },
 components: {
 ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
 }
 }
</script>

子组件：

<template>
 <div tag="div" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+'px'}" >
 <span id="btn1" class="er-carouseindex-left" @mousedown="imgMove('mouseLeft')" @mouseup="cancelMove('left')" v-show="isOrNotButton"></span>
 <span id="btn2" class="er-carouseindex-right" @mousedown="imgMove('mouseRight')" @mouseup="cancelMove('right')" v-show="isOrNotButton"></span>
 <div id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
 <div class="er-carouseindex-bar" v-show="isOrNotCircle">
 <div v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
 </div>
 </div>
 <div id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:''}">
 <div class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+'%'}"
 style="max-height:50%;">
 <slot :item="list"></slot>
 </div>
 </div>
 </div>
 </div>
</template>
<script>
 export default
 {
 name: "ErCarouselIndex",
 data(){
 return {
 imgList: [],//请求接口数据
 imgLisShow: [],//图片滚动数据，包括左中右三种
 timer: null,//自动循环滚动时的间隔时间
 timeout:null,//长按时的图片滚动间隔时间
 index:0,//图片索引
 translateXnum:0,//图片滚动时的偏移量
 translateX:"",//生成图片偏移时的表达式
 imgWidth:"",//图片所占宽度
 timeDown:"",//鼠标刚按下时的时间
 timeup:"",//鼠标松开时的时间
 clickSpace:"",//鼠标按下松开的时间间隙
 transFlag:true,//是否匀速滚动,
 transitionTime:"",
 indexCircle:0//小圆圈滚动索引
 }
 },
 props:{
 duration:0,//图片延时滚动
 typeNumber:0, //每次滚动几张
 timeSpace:0, //图片滚动时间间隔
 url:String,//请求接口地址
 pageNumber:0,//当前页面显示几张图片
 isOrNotButton:true,//是否显示左右按钮
 isOrNotCircle:true,//是否显示小圆圈
 imgHeight:""//图片滚动显示高度
 },
 watch:{
 index:{
 handler(){
 var _this=this;
 if(Math.abs(this.index)==this.imgList.length){
 this.indexCircle=0;
 setTimeout(function(){
 _this.reset();
 },_this.duration*1000*0.98);
 }else{
 this.indexCircle=this.index;
 }
 this.calcXnum();
 }
 },
 translateXnum:{
 handler(){
 this.translateX="translateX("+this.translateXnum+"%)";
 }
 }
 },
 methods:{
 //页面初始化复赋值
 imgView:function() {
 var _this = this;
 _this.$http.get(_this.url).then(function (res) {
 _this.imgList = res.data.imgList;
 for(var i=0;i<3;i++){
 _this.imgList.forEach(function (item, index) {
 _this.imgLisShow.push(item);
 });
 }
 _this.reset();
 _this.slideAuto();
 _this.imgWidth=(100/_this.pageNumber)-1;
 _this.transitionTime="all "+_this.duration*0.98+"s linear";
 console.log(_this.transitionTime);
 });
 },
 //图片滚动方法(长按)
 imgMove:function(direct){
 var _this = this;
 _this.timeDown=new Date();//记录按下的时间
 _this.timeout = setInterval(function() {
 if(direct=="mouseLeft") {
 _this.leftMove();
 }else{
 _this.rightMove();
 }
 },300);
 },
 //鼠标送开时执行的方法
 cancelMove:function(direct){
 var _this = this;
 _this.clearAuto();
 this.timeup=new Date();//记录松开的时间
 this.clickSpace=this.timeup.getTime() - this.timeDown.getTime();
 //时间间隔小于500毫秒为点击，反之为长按
 if(this.clickSpace<500){
 for(var i=0;i<_this.typeNumber;i++){
 if(direct=="left"){
 _this.leftMove();
 }else{
 _this.rightMove();
 }
 }
 }
 if (this.timeout) {
 clearInterval(this.timeout);
 this.timeout = null;
 }
 },
 //向左移动
 leftMove:function(){
 this.index--;
 this.transFlag=true;
 },
 //向右移动
 rightMove:function(){
 this.transFlag=true;
 this.index++;
 },
 slideAuto:function () {
 var _this = this;
 _this.timer = setTimeout(function () {
 if(Math.abs(_this.index)!==_this.imgList.length){
 _this.rightMove();
 _this.slideAuto();
 }
 }, _this.timeSpace * 1000);
 },
 clearAuto:function () {
 console.log("停止");
 if (this.timer) {
 clearInterval(this.timer);
 this.timer = null;
 }
 },
 //重置
 reset:function(){
 this.index=0;
 this.transFlag=false;
 this.calcXnum();
 },
 calcXnum:function(){
 var _this=this;
 this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber);
 },
 //点击圆圈跳转图片
 circleClick:function(dex){
 this.index=dex;
 this.clearAuto();
 }
 },
 mounted()
 {
 this.$nextTick(function () {
 this.imgView();
 });
 }
 }
</script>

这个组件相对来说功能比较完整，用户可以通过传参来控制当前页面需要显示几张图片，图片滚动时间间隔，是否显示左右点击按钮等等，详细参数可以查看props,里面都有注释。

以上这篇vue实现图片滚动的示例代码(类似走马灯效果)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。