var jquery = $; var vue = new Vue({ el: '#app', data: { // 轮播图 swiperList: [{ img: '../../img/banner.jpg' }], dataList: [], baseurl:'', ro:{ bianhao : false, weizhi : false, guimo : false, zuoweishu : false, zhuangkuang : false, xiangqing : false, tupian : false, thumbsupnum : false, crazilynum : false, clicktime : false, }, detail: { bianhao: '', weizhi: '', guimo: '', zuoweishu: '', zhuangkuang: '', xiangqing: '', tupian: '', thumbsupnum: '', crazilynum: '', clicktime: '', }, guimo: '大型,中型,小型'.split(','), zhuangkuang: '空闲,忙碌'.split(','), centerMenu: centerMenu }, updated: function() { layui.form.render('select', 'myForm'); }, computed: { }, methods: { jump(url) { jump(url) } } }) layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() { var layer = layui.layer; var element = layui.element; var carousel = layui.carousel; var http = layui.http; var jquery = layui.jquery; var form = layui.form; var upload = layui.upload; var laydate = layui.laydate; var tinymce = layui.tinymce; vue.baseurl = http.baseurl;

时间: 2024-01-11 21:06:09 浏览: 81

基于vue2.0实现简单轮播图

5星 · 资源好评率100%

因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。先来个效果图：如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；而下方按钮会根据当前图片自动变红且可以手动控制当前图片。思路：整个demo分为轮播图片和控制span两个部分。按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，作为练手就不搞那么复杂了，对项目有追求【强迫症】的童鞋可以往组件化的目标靠，具体方法参考我之前的博文。第一步，先写出整体框架： <templat 【Vue2.0轮播图实现详解】 Vue2.0是一个强大的前端JavaScript框架，它提供了丰富的功能和便捷的数据绑定机制，使得开发复杂的Web应用变得更加容易。在这个教程中，我们将一起学习如何基于Vue2.0实现一个简单的轮播图组件。 **整体框架** 我们需要创建一个模板结构，用于展示轮播图和控制按钮。模板代码如下： ```html <template> <div class="slide"> <div class="slideshow"> <ul> <li v-for="(img, index) in imgArray" :key="index"> <a href="#"><img :src='img'></a> </li> </ul> </div> <div class="bar"> <span v-for="(item, index) in imgArray" :key="index"></span> </div> </div> </template> ``` **数据绑定与列表渲染** 在这个模板中，我们使用`v-for`指令来遍历`imgArray`，展示每张图片。注意，每个列表项都有一个`:key`属性，这是Vue推荐的最佳实践，用于在进行DOM更新时更好地跟踪和识别元素。`v-show`指令则用来控制图片的显示与隐藏，根据`mark`变量与当前索引`index`的关系。 **轮播逻辑** 轮播图的核心是通过改变`mark`变量来切换显示的图片。当`mark`等于当前索引时，对应的图片显示，其他隐藏。同样，底部的控制按钮也会根据`mark`的值来激活或禁用，通过`:class="{ 'active': index === mark }"`实现。 ```html <template> ... <li v-for="(img, index) in imgArray" v-show="index === mark" :key="index"> <a href="#"><img :src='img'></a> </li> <span v-for="(item, index) in imgArray" :class="{ 'active': index === mark }" :key="index"></span> ... </template> ``` **自动播放与用户交互** 为了实现自动播放，我们在`data`中定义`mark`初始值为0，并在`created`生命周期钩子中启动定时器，每隔2.5秒调用`autoPlay`方法增加`mark`的值。当`mark`达到数组长度时，重置回0，形成循环。 ```javascript export default { data () { return { mark: 0, // 比对图片索引的变量 imgArray: ['../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg'] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { // 当遍历到最后一张图片置零 this.mark = 0; } }, play () { setInterval(this.autoPlay, 2500); }, change (i) { this.mark = i; } }, created () { this.play(); } } ``` **用户交互与暂停功能** 当鼠标移入轮播图时，我们可以通过暂停定时器来停止轮播，移出时恢复播放。这可以通过监听`mouseover`和`mouseout`事件实现。同时，底部的按钮允许用户手动切换图片，`change`方法接收当前点击的索引，更新`mark`值。 **CSS样式** 我们需要添加CSS样式来完善布局和动画效果，例如设置轮播图的宽度、高度，以及图片的绝对定位等。这部分可以根据实际需求进行调整，以达到预期的视觉效果。 ```css .slide { width: 1024px; height: 320px; margin: 0 auto; margin-top: 50px; overflow: hidden; position: relative; } .slideshow { width: 1024px; height: 320px; } li { position: absolute; } img { width: 1024px; height: 320px; } .bar { position: absolute; width: 100%; bottom: 10px; margin: 0 auto; z-index: 10; text-align: center; } .active { background-color: red; /* 自定义激活状态的颜色 */ } ``` 总结起来，这个基于Vue2.0的简单轮播图实现了自动播放、鼠标悬停暂停、以及手动切换图片的功能。它展示了Vue的`v-for`、`v-show`、数据绑定、事件监听、以及组件的生命周期管理等核心概念。通过这个实例，你可以进一步理解和掌握Vue2.0的基本用法，并将其应用到更复杂的项目中。

这段代码看起来也是一个使用了 Vue.js 和 layui 框架的前端页面。其中定义了一个 Vue 实例，包含了一些数据属性、方法和计算属性。此外，还使用了 layui 的一些组件和插件，如轮播图、layer弹窗、element元素、http请求、form表单、upload上传和laydate日期选择器。另外，这个页面还包含了一个 tinymce 富文本编辑器。你有什么关于这段代码的问题吗？

阅读全文

相关推荐

Vue.js实现文件上传：input[type='file']实战解析

Vue自定义v-bind:style指令详解及实战应用

var jquery = $; var vue = new Vue({ el: '#app', data: { // 轮播图 swiperList: [{ img: '../../img/banner.jpg' }], dataList: [], baseurl:'', ro:{ bianhao : false, weizhi : false,

Vue.js简介及基本概念解析

探讨前端框架Vue.js的核心概念

前端技术入门：HTML、CSS、JavaScript

JavaScript程序设计初步：实现动态网页效果

Web开发基础：HTML、CSS、JavaScript详解

前端框架集成：Razor Pages中的响应式设计实践

【双向绑定详解】：精通前端数据绑定的五个步骤

仿qq聊天记录展示页面html 使用vue和jquery.scrollbar完整代码怎么写

仿一个微信聊天记录展示页面html 使用vue和jquery.scrollbar完整代码怎么写

从数据库中读取附带图片名称的数据，controller层在html中动态生成布局的案例

前端流程图开发：Vue+Dagre-D3实现与功能解析

Vue深层组件嵌套传值策略：$attrs与$listeners的应用

基于springboot大学生就业信息管理系统源码数据库文档.zip

基于java的驾校收支管理可视化平台的开题报告.docx

原木5秒数据20241120.7z

毕业设计&课设_基于 Vue 的电影在线预订与管理系统：后台 Java（SSM）代码，为毕业设计项目.zip

最新推荐

解决vue net :ERR_CONNECTION_REFUSED报错问题

vue中的.$mount(&#39;#app&#39;)手动挂载操作

VUE 3D轮播图封装实现方法

vue.js学习笔记:如何加载本地json文件

vue中如何动态绑定图片,vue中通过data返回图片路径的方法

Chrome ESLint扩展：实时运行ESLint于网页脚本

管理建模和仿真的文件

精确率与召回率的黄金法则：如何在算法设计中找到最佳平衡点

在嵌入式系统中，如何确保EFS高效地管理Flash和ROM存储器，并向应用程序提供稳定可靠的接口？

基于 Webhook 的 redux 预处理器实现教程

vue中的.$mount('#app')手动挂载操作