基于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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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代码简化
2010/02/08 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python学习小技巧总结
2018/06/10 Python
详解numpy的argmax的具体使用
2019/05/27 Python
详解python中的模块及包导入
2019/08/30 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
英语教学随笔感言
2014/02/20 职场文书
社会公德演讲稿
2014/05/20 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
中班下学期个人总结
2015/02/12 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
教师听课学习心得体会
2016/01/15 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js