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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 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读取超大文件的实例代码
2012/04/01 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
python 删除非空文件夹的实例
2018/04/26 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python while true实现爬虫定时任务
2020/06/08 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
飞屋环游记观后感
2015/06/08 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL