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 相关文章推荐
js替代copy(示例代码)
Nov 27 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php页面缓存方法小结
2015/01/10 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Jquery轮播效果实现过程解析
2016/03/30 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python如何实现爬取B站视频
2020/05/20 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
农救科工作职责
2013/11/27 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
优秀党员事迹材料
2014/12/18 职场文书
个人总结与自我评价
2015/02/14 职场文书
毕业典礼主持词
2015/06/29 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python