华山资源网

javascript单张多张图无缝滚动实例代码
网络编程 2024/12/23 佚名
3 1

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

下面我就介绍几种纯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="/UploadFiles/2021-04-02/1.jpg">


 


内容补充：


背景：


想要实现图片持续滚动，既然使用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图片无缝滚动的资料请关注其它相关文章！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com