基于vue.js实现图片轮播效果


Posted in Javascript onDecember 01, 2016

本文实例为大家分享了vue图片轮播的具体代码,供大家参考,具体内容如下

轮播图效果:

基于vue.js实现图片轮播效果

基于vue.js实现图片轮播效果

1.html

<template>
 <div class="shuffling">
 <div class="fouce fl">
 <div class="focus">
 <ul class="showimg">
 <template v-for='sd in shufflingData'>
 <li v-if='shufflingId==$index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'>
 <a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"><img alt="{{sd.title}}" v-bind:src="sd.url"/></a>
 <h3><a target="_blank" title="{{sd.title}}" href="{{sd.href}}">{{sd.title}}</a></h3>
 </li>
 </template>
 </ul>
 <div class='bullet-pagination'>
 <a class="bullet" v-bind:class="{'active': shufflingId==0}" v-on:click='bulletFunOne'></a>
 <a class="bullet" v-bind:class="{'active': shufflingId==1}" v-on:click='bulletFunTwo'></a>
 <a class="bullet" v-bind:class="{'active': shufflingId==2}" v-on:click='bulletFunThree'></a>
 </div>
 <div v-show='PreNext' class="preNext pre" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='preFun'></div>
 <div v-show='PreNext' class="preNext next" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='nextFun'></div>
 </div>
 </div>
 </div>
</template>

2.js

<script>
export default {
 components: {
 },
 ready: function() {
 var _this=this;
 var timer = setInterval(function() {
 if(_this.shufflingId>=0&&_this.shufflingId<_this.shufflingData.length-1){
 _this.shufflingId=parseInt(_this.shufflingId)+1;
 }
 else if (_this.shufflingId==_this.shufflingData.length-1) {
 _this.shufflingId=0;
 }
 }, 5000)
 },
 methods: {
 bulletFunOne:function(){
 this.shufflingId=0;
 },
 bulletFunTwo:function(){
 this.shufflingId=1;
 },
 bulletFunThree:function(){
 this.shufflingId=2;
 },
 showPreNext:function(){
 this.PreNext=true;
 },
 hiddenPreNext:function(){
 this.PreNext=false;
 },
 preFun:function(){
 var _this=this;
 if(_this.shufflingId>0&&_this.shufflingId<_this.shufflingData.length){
 _this.shufflingId=parseInt(_this.shufflingId)-1;
 }
 },
 nextFun:function(){
 var _this=this;
 if(_this.shufflingId>=0&&_this.shufflingId<_this.shufflingData.length-1){
 _this.shufflingId=parseInt(_this.shufflingId)+1;
 }
 }
 },
 data() {
 return {
 shufflingData:[{
 title:'喵来个米',
 href:'1',
 url:'/xxx/xx/src/img/1.png'
 },
 {
 title:'豆豆',
 href:'2',
 url:'/xxx/xx/src/img/2.png'
 },{
 title:'猫咪咪',
 href:'3',
 url:'/xxx/xx/src/img/3.jpg'
 }],
 shufflingId:0,
 PreNext:false,
 }
 }
}
</script>

3.css

.fouce {
 position: relative;
 left:380px;
 overflow: hidden;
 height: 570px;
 width: 1100px;
}
.fl {
 float: left;
}
.focus{
 overflow: hidden;
}
.fouce ul {
 position: absolute;
}
.fouce ul li {
 float: left;
}
.fouce ul li a.img {
 display: block;
 height: 520px;
}
.showimg{
 width:1440px;
 left:-0px;
}
.showimg img {
 display: block;
 width:1100px;
 height:520px;
}
.fouce .bullet-pagination {
 position: absolute;
 bottom: 50px;
}
.fouce ul li h3 {
 height: 40px;
 line-height: 40px;
 background-color: #ededed;
 text-align: center;
 font-size: 25px;
 width: 1100px;
}
.bullet-pagination {
 width: 100%;
 text-align: center;
 padding-top: 16px;
 clear: both;
 overflow: hidden;
}
.bullet {
 display: inline-block;
 background: #fff;
 width: 12px;
 height: 12px;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 margin-right: 5px;
 opacity: 0.8;
 -webkit-transition: opacity 0.8s linear;
 -moz-transition: opacity 0.8s linear;
 -ms-transition: opacity 0.8s linear;
 -o-transition: opacity 0.8s linear;
 transition: opacity 0.8s linear;
}
.bullet.active {
 background: #007cdb;
 opacity: 1;
 cursor: pointer;
}
.preNext {
 display: block;
 width: 31px;
 height: 41px;
 position: absolute;
 top: 200px;
 cursor: pointer;
}
.pre {
 background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat right center;
}
.next {
 background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat left center;
 right: 0px;
}
* {
 padding: 0;
 margin: 0;
 list-style: none;
}
a{
 text-decoration: none;
}

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
You might like
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
django 修改server端口号的方法
2018/05/14 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
学生会招新策划书
2014/02/14 职场文书
土木工程专业推荐信
2014/02/19 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
《将心比心》教学反思
2014/04/08 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
革命电影观后感
2015/06/18 职场文书
催款函范文
2015/06/24 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
毕业设计工作总结
2015/08/14 职场文书