vue 手写图片左右跑马灯效果

效果图与代码贴上：

1.html部分

<template><div class="box"><Icon class="icons1 icons" type="ios-arrow-dropleft-circle" @click="left"/><Icon class="icons2 icons" type="ios-arrow-dropright-circle" @click="right"/><div class="imgbox"><ul ref="ul" :style="{'transform':`translateX(${slidenum}px)`}"><li v-for="(item,index) of slide_array" class="slide" :key="index" @click="tip(item)"><img :src="item.src" alt="错误" crossorigin="anonymous"><div class="zhezhao" v-if="index != now_index"></div></li></ul></div></div></template>

2.js部分

<script>
import img1 from '@/assets/images/slide/4.jpg'
import img2 from '@/assets/images/slide/2.jpg'
import img3 from '@/assets/images/slide/1.jpg'
import img4 from '@/assets/images/slide/3.jpg'
import img5 from '@/assets/images/slide/5.jpg'export default {name: 'imgsdata',data() {return {slidenum:0,slide_array: [{src: img1},{src: img2},{src: img3},{src: img4},{src: img5},{src: img1},{src: img2},{src: img3},{src: img4},{src: img5},{src: img2},{src: img1},{src: img4}],now_index:0}},methods:{left(){if(this.now_index == 0){alert('这是第一张')}else{this.now_index--// 移动li外框// this.$refs['ul'].style.transform = translateX('-90px')this.slidenum = '-' + 90*this.now_index}},right(){if(this.now_index == this.slide_array.length - 1){alert('这是最后一张')}else{this.now_index++this.slidenum =  '-'+90*this.now_index}},tip(index){this.now_index = indexthis.slidenum =  '-'+90*this.now_index}}
}
</script>

3.css部分

<style scoped lang="scss">
.box{position: relative;margin-top:30px;.icons{position: absolute;font-size: 40px;top:20px;cursor: pointer;}.icons1{left:20px;}.icons2{right:20px;}.imgbox{width:80%;margin:0 auto;overflow: hidden;ul{width:2100px;transition: 1s;//display: flex;li{width: 80px;height: 80px;overflow: hidden;float: left;margin-right: 10px;position: relative;img{max-height: 100%;}.zhezhao{width: 100%;height: 100%;background: rgba(155,155,155,0.7);position: absolute;z-index: 11;top:0;left: 0;}}}}
}</style>

番外：现成的swiper-----https://github.surmon.me/vue-awesome-swiper/效果虽好

但是无奈，上级要求跑马灯图片要从左侧位置开始，不能从居中位置开始。经过一番研究未能用现成的配置实现效果，因此自己写了一个，分享如下。js部分代码比较简单，但是基本操作已贴上，具体操作根据各自的需求再做修改吧

vue 手写图片左右跑马灯效果相关推荐

【Vue案例一】实现跑马灯效果
在Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果: 第一步:导入Vue包 <script ...
JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
jquery实现图片的跑马灯效果
样式一(无限循环,消耗内存): <!DOCTYPE html> <html><head><meta charset="utf-8" /&g ...
教你自定义竖直跑马灯效果(广告专用)
最近因为项目需要,写了一个跑马灯效果的控件,过程中也学到一些东西,在这里和大家分享一下. 首先让我们来看一下效果: 其中的图标,文字,甚至每行的整个布局都是可以自定义的,我们可以使用整个控件很方便做出 ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果
简介有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容.这时候就需要我们自定义view来实现文本跑马灯效果了. 效果图 jj ...
js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...

vue 手写图片左右跑马灯效果

vue 手写图片左右跑马灯效果相关推荐

最新文章

热门文章

vue 手写图片左右跑马灯 效果

vue 手写图片左右跑马灯 效果相关推荐

最新文章

热门文章

vue 手写图片左右跑马灯效果

vue 手写图片左右跑马灯效果相关推荐