javascript单张多张图无缝滚动实例代码


Posted in Javascript onMay 10, 2020

我们会看到很多的网站上会使用多张图片无缝滚动的效果。

下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。

1.效果展示:

javascript单张多张图无缝滚动实例代码

<!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.stopRoll = this.stopRoll.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 === 'top' || this.direction === 'left'){
      this.speed = -1;
    }else{
      this.speed = 1;
    }
  }
  roll(){
    switch (this.direction) {
      case "top":
        // 如果滚动的盒子的top值超出元素的高度,则置为0
        if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
          this.elemBox.style.top = 0;
        }else{
          this.elemBox.style.top = 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:
        // 默认向上滚动,如果滚动的盒子的top超出元素的高度,则置为0
        if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
          this.elemBox.style.top = 0;
        }else{
          this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
        }
    }
  }
  stopRoll(){
    clearInterval(this.scrollTimer)
  }
  startRoll(){
    this.scrollTimer = setInterval(this.roll,this.time)
  }
}

以上就是javascript单张多张图无缝滚动实例代码的详细内容,更多关于javascript图片无缝滚动的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 #Javascript
js实现文章目录索引导航(table of content)
May 10 #Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 #Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 #Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 #Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 #Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 #Javascript
You might like
php小偷相关截取函数备忘
2010/11/28 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP7 弃用功能
2021/03/09 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
javascript实现日历效果
2019/06/17 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
js获取图片的base64编码并压缩
2020/12/05 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python模拟登录12306的方法
2014/12/30 Python
Python实现调度算法代码详解
2017/12/01 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
法国足球商店:Footcenter
2019/07/06 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
群胜软件Java笔试题
2012/09/29 面试题
结婚典礼证婚词
2014/01/08 职场文书
班主任经验交流材料
2014/12/16 职场文书
创业计划书详解
2019/07/19 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python