如何做图片滚动展示php,利用vue如何实现图片滚动？

下面我就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。

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

父：

-----使用子组件传过来的值，封装slot

{{props.item.title}}

import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'

export default {

name: 'app',

data() {

}

},

components: {

ErCarouselIndex//一定要进行组件声明，不然不能引用子组件

}

}

子组件：

style="max-height:50%;">

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>

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();

});

}

}

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：