基于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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
Vuex 入门教程
Jan 10 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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删除HTMl标签的三种解决方法
2013/06/30 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
python中as用法实例分析
2015/04/30 Python
python文件与目录操作实例详解
2016/02/22 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python基础教程之异常详解
2019/01/10 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python实现五子棋游戏
2019/06/18 Python
python生成器推导式用法简单示例
2019/10/08 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
三八妇女节活动主持词
2014/03/17 职场文书
农村党员一句话承诺
2014/05/30 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
财政局个人年终总结
2015/03/03 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
MySQL深分页问题解决思路
2022/12/24 MySQL