直接上代码:

轮播图1：

html

<template><div><div class="back_add"><div class="threeImg"><div class="Containt"><div class="iconleft"  @click="zuohua"><i class="el-icon-arrow-left"></i></div><!-- 'left':calleft + 'px' 是 ul 向左偏移的量 --><ul :style="{'left':calleft + 'px'}"  v-on:mouseover="stopmove()" v-on:mouseout="move()"><li v-for="(item,index) in superurl" :key="index"><img :src="item.url"/></li></ul><div class="iconright" @click="youhua"><i class="el-icon-arrow-right" ></i></div></div></div></div></div>
</template>

轮播的数据

         //price不是很重要，重要的是urlcalleft:0  //calleft是整个数据的偏移量superurl: [{"url":require("../../assets/shoppingsDetail2.png"),"price":"￥1"},{"url":require("../../assets/shoppingsDetail1.png"),"price":"￥2"},{"url":require("../../assets/shoppingsDetail3.png"),"price":"￥3"},{"url":require("../../assets/shoppingsDetail4.png"),"price":"￥4"},{"url":require("../../assets/shoppingsDetail2.png"),"price":"￥5"},{"url":require("../../assets/shoppingsDetail1.png"),"price":"￥6"},{"url":require("../../assets/shoppingsDetail3.png"),"price":"￥7"},{"url":require("../../assets/shoppingsDetail2.png"),"price":"￥8"}],

vue.js方法

created() {this.move()},methods: {//移动move() {this.timer = setInterval(this.starmove, 2500)},//开始移动starmove() {// 340是根据自己图片的大小自己设置的，点击一下整体向左平移多少this.calleft -= 340;if (this.calleft < -1200) {this.calleft = 0}},//鼠标悬停时停止移动stopmove() {clearInterval(this.timer)},//点击按钮左移zuohua() {this.calleft -= 340;if (this.calleft < -1200) {this.calleft = 0}},//点击按钮右移youhua() {this.calleft += 340;if (this.calleft > 0) {this.calleft = -1020}},},

css代码

最最最最最重要的一点是：ul需要设置为相对定位，即position:relative

只有这样，整体才会有轮播的效果

<style scoped>
/*超链接图片*/#divAdd {background-color: #ededed;/*width: 100%;*//*min-width: 1200px;*/width: 1000px;margin: 0px auto;
}.divAdd-con {margin: 0px auto;width: 1000px;overflow: auto;padding: 30px 0px;
}.divAdd-con img {float: left;
}.indexrt {margin: 0px 40px;
}.divAddleft img {float: left;margin-bottom: 7px;
}.divAddleft {float: left;display: inline;width: 370px;
}.divAddrt {float: right;display: inline;margin-top: 7px;
}.back_add {background-color: #ededed;
}.divAdd-con img {border: none;
}a:focus,
a:hover {color: #23527c;
}.threeImg {height: 158px;background: #ededed;border-bottom: 3px solid #4679B2;min-width: 1000px;
}.threeImg .Containt ul {margin: 0 auto;width: 2400px;position: absolute;left: 0px;cursor: pointer;height: 100%
}.threeImg .Containt ul li {width: 300px;margin-right: 40px;margin-top: 10px;float: left;
}.threeImg .Containt ul li img {height: 128px;width: 100%;
}.Containt {position: relative;width: 1000px;height: 130px;overflow: hidden;margin: 0 auto;
}.iconleft {position: absolute;width: 20px;height: 80px;top: 10px;z-index: 99999;padding-top: 48px;background-color: #ddd;vertical-align: middle;
}.iconright {position: relative;left: 978px;top: 70px;background-color: #ddd;/*position: absolute;*/width: 20px;height: 80px;top: 10px;z-index: 99999;padding-top: 48px;background-color: #ddd;vertical-align: middle;
}
</style>

由于接下来的轮播图是参照elementUI，因此只需要去官网查看相关教程就行

轮播图2: 走马灯效果引用的是elementUI中的样式

<template><el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><h3>{{ item }}</h3></el-carousel-item></el-carousel>
</template><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

轮播图3

<template><el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="item in 4" :key="item"><h3>{{ item }}</h3></el-carousel-item></el-carousel>
</template><style>.el-carousel__item h3 {color: #475669;font-size: 18px;opacity: 0.75;line-height: 300px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

Vue.js轮播图走马灯 (详解)相关推荐

php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码  <div class="wrap" ...
bootstrap轮播图代码详解
最近在做个人简历网站,然后要用到轮播图,上网查了一下,以下为轮播图代码: 下面展示一些内联代码片.  <div id="my ...
三种js轮播实现方式详解（看一遍就会）
js轮播的三种实现方式 1.替换scr(入门级) <!DOCTYPE html> <html><head><meta charset="utf-8& ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...

Vue.js轮播图走马灯 (详解)

直接上代码:

轮播图1：

最最最最最重要的一点是：ul需要设置为相对定位，即position:relative

只有这样，整体才会有轮播的效果

由于接下来的轮播图是参照elementUI，因此只需要去官网查看相关教程就行

轮播图2: 走马灯效果引用的是elementUI中的样式

轮播图3

Vue.js轮播图走马灯 (详解)相关推荐

最新文章

热门文章