基于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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
浅谈js中的this问题
Aug 31 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
vue递归实现树形组件
Jul 15 Vue.js
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读取IMAP邮件
2006/10/09 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php读取mysql的简单实例
2014/01/15 PHP
destoon复制新模块的方法
2014/06/21 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
pandas值替换方法
2018/07/10 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python读取并写入mat文件的方法
2019/07/12 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
零基础小白多久能学会python
2020/06/22 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Django缓存Cache使用详解
2020/11/30 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
小学运动会入场式解说词
2014/02/18 职场文书
《长征》教学反思
2014/04/27 职场文书
2014年保洁员工作总结
2014/11/19 职场文书