javascript单张多张图无缝滚动实例代码
网络编程 2021-07-04 15:02www.168986.cn编程入门
在本篇文章里长沙网络推广给大家分享的是关于javascript单张多张图无缝滚动实例代码和实例,需要的朋友们可以参考下。
我们会看到很多的网站上会使用多张图片无缝滚动的效果。
狼蚁网站SEO优化我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。
1.效果展示:
<!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;} #div1 ul{position: absolute;left: 0;} #div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;} #div1 ul li img{width:100%;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var aA=document.getElementsByTagName('a');//获取向右向左的箭头 var timer=null; var iSpeed=10; oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放 oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度,根据图片的个数和每个图片的宽度计算,保证总宽度是可调整的 function fnMove(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; }else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; }//定义到边界的时候,实现无缝衔接 oUl.style.left=oUl.offsetLeft+iSpeed+'px'; //定义图片的右边距随着速度不断不断增加,或减小,实现运动的效果 } timer=setInterval(fnMove,30); aA[0].onclick=function(){ iSpeed=-10; //按下左箭头,定义向左运动 } aA[1].onclick=function(){ iSpeed=10; //按下右箭头,定义向右运动 } oDiv.onmouseover=function(){ clearInterval(timer); //鼠标移动到图片上,清除定时器,停止运动 } oDiv.onmouseout=function(){ timer=setInterval(fnMove,30); //鼠标移出,重新开启定时器,重新运动 } }; </script> <body> <a href="javascript:;" rel="external nofollow" rel="external nofollow" >←</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" >→</a> <div id="div1"> <ul> <li><img src="miaoflash/images/1.jpg"></li> <li><img src="miaoflash/images/2.jpg"></li> <li><img src="miaoflash/images/3.jpg"></li> <li><img src="miaoflash/images/4.jpg"></li> <li><img src="miaoflash/images/5.jpg"></li> <div style="clear: none;"></div> </ul> </div> </body> </html>
内容补充:
背景:
想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。
原理:
图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。
实现:
html主要包含三块:
1、最外层盒子,用来展示滚动图的区域,overflow:hidden;
2、滚动的盒子,主要改变该盒子的定位值,来实现滚动,里面包含所有要滚动的图片或文字
3、包含图片或文字的盒子。
代码:
class Roll { constructor(opts) { this.elem = opts.elem; // 图片包含滚动长度的元素的 this.elemBox = opts.elemBox; //图片展示区域元素,为了获取展示区域的高度 this.direction = opts.direction; this.time = opts.time; this.init(); this.roll = this.roll.bind(this) this.startRoll = this.startRoll.bind(this) this.sRoll = this.sRoll.bind(this) } init(){ this.elemHeight = this.elem.offsetHeight; this.elemHtml = this.elem.innerHTML; this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml; this.speed; // 如果向上滚或者向左滚动每次减1,向下滚或者向右滚动每次加1 if(this.direction === '' || this.direction === 'left'){ this.speed = -1; }else{ this.speed = 1; } } roll(){ switch (this.direction) { case "": // 如果滚动的盒子的值超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style. = 0; }else{ this.elemBox.style. = this.elemBox.offsetTop + this.speed + 'px'; } break; case "bottom": // 如果滚动的盒子的bottom值超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){ this.elemBox.style.bottom = 0; }else{ this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px'; } break; case "left": // 如果滚动的盒子的left超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){ this.elemBox.style.left = 0; }else{ this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px'; } break; case "right": // 如果滚动的盒子的right超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){ this.elemBox.style.right = 0; }else{ this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px'; } break; default: // 默认向上滚动,如果滚动的盒子的超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style. = 0; }else{ this.elemBox.style. = this.elemBox.offsetTop + speed + 'px'; } } } sRoll(){ clearInterval(this.scrollTimer) } startRoll(){ this.scrollTimer = setInterval(this.roll,this.time) } }
以上就是javascript单张多张图无缝滚动实例代码的详细内容,更多关于javascript图片无缝滚动的资料请关注狼蚁SEO其它相关文章!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程