Vue.js轮播图走马灯代码实例（全)

话不多说先上效果图，本文引荐链接https://www.jb51.net/article/129112.htm

这个是html，

template div class=' back _ add ' div class=' three img ' div class=' Containt ' div class=' icon left ' @ click=' zoo Hua ' I class=' El-icon-arrow-left '/I/div ul : style=' { ' left ' : calleft ' px ' } ' v-: mouse over=' stop move()' v-3360 mouse out=' move()' Li v-for='(item，index)在superurl中数据中我用了一个数组来放图片的目录，

data(){ return { super URL :[{ URL : }，img: '././././静态/图像/家庭/Picturea。png '，}，{ url: ' '，img: '././././静态/图像/主页/图片b。png '，}，{ url: ' '，img: '././././静态/图像/主页/图片c。png '，}，{ url: ' '，img: '././././静态/图像/家庭/图片。png '，}，{ url: ' '，img: '././././static/image/home/showimg 1。png '，}，{ url: ' '，img: '././././static/image/home/showimg 2。png '，}，]，calleft:0 }方法是这样的

created() { this.move() }，methods: { //移动move(){ this。timer=setInterval(这。星移，2500) }，//开始移动star move(){ this。calle ft-=340；如果(这个。calleft-1200){这个。calleft=0 } }，//鼠标悬停时停止移动stop move(){ clearInterval(这。定时器)}，//点击按钮左移动物园华(){这个。calle ft-=340；如果(这个。calleft-1200){这个。calleft=0 } }，//点击按钮右移华友(){ this.calleft=340如果(这个。calleft 0){ this。calleft=-1020 } }，}，因为我们只有静态的图片所以这么可以，但是如果是取数据库中不定数量的图片就不能这么使用了

最后我加上了钢性铸铁样式就可以了

样式范围/超链接图片*/# Divadd {底色： # eded/*宽度： 100%;*//*最小宽度： 1200像素；*/宽度： 1000 px余量： 0px自动；} .divAdd-con { margin : 0px auto；宽度： 1000像素；飞越：汽车；padding: 30px 0px }。divAdd-con img {左侧浮动：} .indexrt { margin: 0px 40px}。divAddleft img {左侧浮动： }边距-底部： 7px} .divAddleft { float : left display : inline宽度： 370像素；} .divAddrt { float : right display : inline边距-top : 7px；} .back _ add {底色： # eded} .divAdd-con img { border :无；} a:focus，a :悬停{ color : # 23527 c；} .三英寸高： 158像素背景： # ed边框-底部： 3px实心# 4679B2最小宽度： 1000像素；} .三个。包含ul { margin: 0 auto宽度： 2400像素；绝对位置：左： 0pxcursor:指针；高度： 100%} .三个。包含ul li {宽度： 300像素右边距： 40px页边距-top : 10px；向左浮动：} .三个。包含ul li img { height: 128px宽度： 100%;} .containt { position :相对；宽度： 1000像素；高度： 130像素；飞越：隐藏；margin: 0 auto}。图标左{位置：绝对；宽度： 20px高度： 80pxtop : 10pxz-index : 99999；填充-top : 48px；背景色： # DDD；垂直对齐： 中间；} .图标右侧{位置：相对；左侧： 978pxtop: 70px背景色： # DDD；/*位置：绝对值；*/宽度： 20px高度： 80pxtop : 10pxz-index : 99999；填充-top : 48px；背景色： # DDD；垂直对齐： 中间；}/style

走马灯效果引用的是elementUI中的样式

模板El-carousel : interval=' 4000 ' type=' card ' height=' 200 px ' El-carousel-item v-for=' item in 6 ' : key=' item ' H3 { { item } }/H3/El-carousel-item/El-carousel/模板样式埃尔-旋转木马_ _物品H3 {颜色： # 475669；font-size : 14pxopacity: 0.75线高： 200像素；保证金： 0；} .El-carousel _ _ item : th-child(2n){底色： # 99a9bf} .El-carousel _ _ item : th-child(2n 1){底色： # d3d ce6}/样式轮播效果图

模板el-carousel :interval='5000 '箭头='始终' El-carousel-item v-for=' 4 ' :键中的项目=' item ' H3 { { item } }/H3/El-carousel-item/El-carousel/模板样式埃尔-旋转木马_ _物品H3 {颜色： # 475669；font-size : 18pxopacity: 0.75线高： 300像素；保证金： 0；} .El-carousel _ _ item : th-child(2n){底色： # 99a9bf} .El-carousel _ _ item : th-child(2n 1){底色： # d3d ce6}/样式以上所述是小编给大家介绍的Vue.js轮播图走马灯详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！