之前用jQuery写过轮播组件，用的jquery动画实现的图片滑动效果。这个组件的滑动特效是
之前用jQuery写过轮播组件，用的jquery动画实现的图片滑动效果。这个组件的滑动特效是原生js搭配vue的数据绑定实现的，不依赖其他库，虽然可以再vue.js中引入swiper,但是引入类库的最大的缺点就是冗余代码太多，所以还是自己写一个比较好，简单扼要。（ps:组件的宽高设置还有有点小bug，子组件中需要改为用js动态修改container的宽高，另外可能还有其他地方有不合理之处，欢迎各位批评指正）
github地址：git@github.com:cainiao222/vueslider-components.git
父组件代码：
<template>
<div>
<slider :img="img" :width="width" :height="height"></slider>
</div>
</template>
<script>
// import swiper from 'swiper'
import slider from './slider1.vue'
export default {
data(){
return {
img:[{src:require('../assets/slideShow/pic1.jpg'),name:'hehe1'},
{src:require('../assets/slideShow/pic2.jpg'),name:'hehe2'},
{src:require('../assets/slideShow/pic3.jpg'),name:'hehe3'},
{src:require('../assets/slideShow/pic4.jpg'),name:'hehe4'}
],
width:460,
height:250
}
},
components:{
slider:slider
}
}
</script>子组件代码：
<template>
<div class="box">
<div @mouseenter="endInterval" @mouseleave="startInterval" class="container">
<div :style="{width:wrap_width+'px',height:wrap_height+'px',left:offset_left+'px'}" class="slider-wrap">
<div class='img' v-for="item in slider_des">
<img :src="item.src" alt="">
</div>
</div>
<div class="bottom">
<ul class="pointContainer">
<li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}" v-for="(point,index) in length"></li>
</ul>
</div>
<div @click="pre" class="click pre"><</div>
<div @click="next" class="click next">></div>
</div>
</div>
</template>
<script>
export default {
props:{
img:{
type:Array,
default:[]
},
width:{
type:Number,
default:460
},
height:{
type:Number,
default:250
}
},
mounted(){
this.startInterval();
},
data(){
console.log(this.width);
return{
length:new Array(this.img.length),
nowIndex:0,
wrap_width:this.width*(this.img.length+2),
wrap_height:this.height,
offset_left:-this.width,
isTransition:true,
timer:null,
animateFlag:true,
timerAuto:null
}
},
computed:{
slider_des:function () {
var arr=[];
var arr1=arr.concat(this.img);
arr1.push(this.img[0]);
arr1.unshift(this.img[this.img.length-1]);
return arr1;
}
},
methods:{
pre(){
if(this.nowIndex===0){
if(!this.animateFlag){
clearInterval(this.timer);
this.animateFlag=true;
this.offset_left=-(this.length.length)*this.width;
}
this.animate(-this.width,0,function (that) {
that.offset_left=-(that.length.length)*that.width;
});
this.nowIndex=this.img.length-1;
return
}else{
if(!this.animateFlag){
this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-(this.nowIndex*this.width);
}
this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex*this.width));
}
this.nowIndex-=1;
},
startInterval(){
this.timerAuto=setInterval(this.next,2000);
},
endInterval(){
// console.log("leave");
clearInterval(this.timerAuto);
},
next(){
if(this.nowIndex===this.length.length-1){
if(!this.animateFlag){
this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-this.width;
}
this.animate(-(this.length.length)*this.width,-(this.length.length+1)*this.width,function (that) {
that.offset_left=-that.width;
});
this.nowIndex=0;
return
}else{
if(!this.animateFlag){
this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-(this.nowIndex+2)*this.width;
}
this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex+2)*this.width);
this.nowIndex+=1;
}
},
animate(start,end,fuc){
var distance=end-start;
var pre_dis=distance/50;
var that=this;
this.timer=setInterval(function () {
that.animateFlag=false;
if(Math.abs(end-that.offset_left)<=Math.abs(pre_dis)){
that.offset_left=end;
if(fuc){
fuc(that);
}
that.animateFlag=true;
clearInterval(that.timer);
that.timer=null;
return
}
that.offset_left+=pre_dis;
},1);
},
changeIndex(index){
clearInterval(this.timer);
this.animate(-(this.nowIndex+1)*this.width,-(index+1)*this.width);
this.nowIndex=index;
}
}
}
</script>
<style scoped>
*{
margin: 0;
list-style: none;
/*height: 0;*/
}
.box{
position: relative;
}
.container{
width: 460px;
height: 250px;
margin: 0 auto;
border: 1px solid #3bb4f2;
overflow: hidden;
left: 0;
top: 0;
position: absolute;
}
.slider-wrap{
/*width: 2760px;*/
/*height: 250px;*/
position: absolute;
/*left: -460px;*/
/*overflow: hidden;*/
top: 0;
}
.transition{
transition: 0.5s;
}
.img{
width: 460px;
height: 250px;
float: left;
display: inline;
}
img{
width: 460px;
height: 250px;
/*float: left;*/
}
.click{
width: 20px;
background-color: rgba(255,255,255,.3);
color: aliceblue;
font-weight: bold;
position: absolute;
height: 40px;
line-height: 40px;
margin-top: -20px;
top: 50%;
cursor: pointer;
}
.pre{
left: 0;
}
.next{
right: 0;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
text-align: center;
}
.pointContainer{
height: 20px;
}
.point{
display: inline-block;
border: 5px solid #eeeeee;
border-radius: 5px;
line-height: 0;
margin-right: 3px;
}
.active{
border: 5px solid #42b983;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
vue.js轮播图组件 vue.js轮播图 vue.js轮播组件