类似 marquee 的图片左右滑动且无缝对接

<template>
<div class="main"><!-- 左按钮 --><div class="marquee-btn btn-left" @click="directChange('left')"><i class="el-icon-arrow-left" /></div><div id="marque"><div id="inmarque"><div id="marque_1"><!-- <img src="../../../public/images/summary/img01.jpg" border="0" /><img src="../../../public/images/summary/img02.jpg" border="0" /><img src="../../../public/images/summary/img03.jpg" border="0" /><img src="../../../public/images/summary/img04.jpg" border="0" /><img src="../../../public/images/summary/img05.jpg" border="0" /><img src="../../../public/images/summary/img06.jpg" border="0" /> --><img v-for="(img,index) of imgList" :key="index" :src="require(`@static/summary/${img}`)" border="0" /></div><div id="marque_2"></div></div>   </div><!-- 右按钮 --><div class="marquee-btn btn-right" @click="directChange('right')"><i class="el-icon-arrow-right" /></div>
</div>
</template><script>export default {data() {return {// 向右direction: 'right',imgList: FIRST_CFG.summary.list,marInter: null}},methods: {// 改变图片滚动方向directChange(type) {this.direction = type;},// 监听滚动marquee(){// 整个 marquelet marque = document.getElementById("marque");// marque 1let marque_1 = document.getElementById("marque_1");// marque 2let marque_2 = document.getElementById("marque_2");if(this.direction === 'left') {// 向左if(marque_2.offsetWidth - marque.scrollLeft <= 0)marque.scrollLeft -= marque_1.offsetWidthelse{marque.scrollLeft++;}}else {// 向右if(marque.scrollLeft <= 0)marque.scrollLeft += marque_2.offsetWidthelse{marque.scrollLeft--;}}}},mounted() {// 速度，值越大越慢let speed = 20; // 整个 marquelet marque = document.getElementById("marque");// marque 1let marque_1 = document.getElementById("marque_1");// marque 2let marque_2 = document.getElementById("marque_2");// 赋值marque_2.innerHTML = marque_1.innerHTML;this.marInter = setInterval(this.marquee, speed);marque.οnmοuseοver = () => {clearInterval(this.marInter)};marque.οnmοuseοut = () => {this.marInter=setInterval(this.marquee, speed)};},destroyed() {clearInterval(this.marInter);}}
</script><style lang="stylus" scoped>
.main {position: relative;    #marque {position: relative;display:inline-block;background: #FFF;overflow:hidden;width: 100%;z-index: 300;// background:red;img {widht:180px;height:144px;border: 3px solid #F2F2F2;cursor:pointer;}#inmarque {float: left;width: 800%;#marque_1,#marque_2 {float: left;}}}.marquee-btn {position:absolute;width:30px;height:154px;line-height:154px;background:rgba(255,255,255,.4);// background:#000;z-index: 301;cursor:pointer;color:#fff;}.btn-left {left: 0;}.btn-right {right:0;top: 0;bottom: 0;}
}
</style>

类似 marquee 的图片左右滑动且无缝对接相关推荐

高仿优酷Android客户端图片左右滑动（自动切换）
本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...
android imageview 图片切换动画,模仿优酷Android客户端图片左右滑动（自动切换）效果...
本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...
android仿疯狂猜图源码,Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】...
本文实例讲述了Android开发实现高仿优酷的客户端图片左右滑动切换功能.分享给大家供大家参考,具体如下: 本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和 ...
php图片滑动的属性,使用css怎么实现图片的滑动效果？（示例）
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...
android 横向滚动图片,Android使用Photoview实现图片左右滑动及缩放功能
Android使用Photoview实现图片左右滑动及缩放功能发布时间:2020-10-12 14:51:12 来源:脚本之家阅读:119 作者:kuaizilanqiu 我想,不管是做什么样的a ...
鼠标移到到图片，图片向上滑动预览效果
<!DOCTYPE html> <html> <head><title>鼠标移到到图片,图片向上滑动预览效果</title><scri ...
opencv给图片加滑动条调节窗口大小
起因:最近对图片进行截取矩形区域操作时,发现了opencv一个很蛋痛的地方,使用imshow()函数展示图片的时候,一旦图片的分辨率过高,就不能完全显示.要是调整参数为WINDOWSIZE_NORMA ...
微信小程序图片左右滑动 swiper
微信小程序实现图片左右滑动点击切换效果图结构部分 <view class="swiperItem1"><view class="workTitl ...
婚恋交友源码开发，实现图片的滑动切换
前言我们开始来介绍实现婚恋交友源码转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供 ...

类似 marquee 的图片左右滑动且无缝对接

类似 marquee 的图片左右滑动且无缝对接相关推荐

最新文章

热门文章