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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis