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


Posted in Javascript onMay 08, 2019

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

话不多说先上效果图,本文引荐链接https://3water.com/article/129112.htm

这个是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>
     <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.img"/>
      </li>
     </ul>
     <div class="iconright" @click="youhua">
      <i class="el-icon-arrow-right" ></i>
     </div>
     
    </div>
   </div>
   
  </div>
 </div>
</template>

数据中我用了一个数组来放图片的目录,

data() {
  return {
   superurl: [
    {
     url: '',
     img: '../../../../static/image/home/pictureA.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureB.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureC.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureD.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/showImg1.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/showImg2.png',
    },
   ],
   calleft:0
 
  }

 方法是这样的

created() {
  this.move()
 },
 methods: {
  //移动
  move() {
   this.timer = setInterval(this.starmove, 2500)
  },
  //开始移动
  starmove() {
   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样式就可以了

<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>

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

 走马灯效果引用的是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>

轮播效果图

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

<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轮播图走马灯详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
You might like
PHP中的命名空间详细介绍
2015/07/02 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
js实现数字滚动特效
2019/12/16 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
关于赌博的检讨书
2014/01/24 职场文书
工程师岗位职责规定
2014/02/26 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
入党转正申请书范文
2019/05/20 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL