1. Toy模板网首页
  2. > Toy博客

前端多张图片无缝无限循环滚动

9月前 作者：cwr888 分类：Toy博客 阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了前端多张图片无缝无限循环滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

想必大家都注意到<marquee>的不循环滚动。下面说一下循环滚动相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
先了解一下对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

案例1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片滚动</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
<!--
.demo {
	background: #FFF;
	overflow:hidden;
	border: 1px dashed #CCC;
	width: 100%;
	min-width: 900px;
	height:274px;
}
.demo img {
	border: 3px solid #F2F2F2;
	height:274px;
}
.indemo {
	float: left;
	width: 600%;
}
.demo1 {
	float: left;
}
.demo2 {
	float: left;
}

.demoU {
	width:49%;
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 600px;
    text-align: center;
    float: left;
}
.demoU img, .demoD img{
    border: 3px solid #F2F2F2;
    display: block;
	width:100%;
}
.demoD {
	width:49%;
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 600px;
    text-align: center;
    float: right;
}
-->
</style>
<div id="demoL" class="demo">
	<div id="indemoL" class="indemo">
		<div id="demoL1" class="demo1">
			<a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
			<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
			<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
		</div>
		<div id="demoL2" class="demo2"></div>
	</div>
</div>
<div id="demoR" class="demo">
	<div id="indemoR" class="indemo">
		<div id="demoR1" class="demo1">
			<a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
			<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
			<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
			<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
		</div>
		<div id="demoR2" class="demo2"></div>
	</div>
</div>
<div id="demoU" class="demoU"> 
	<div id="demoU1" class="demoU1"> 
		<a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
		<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
		<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
	</div> 
	<div id="demoU2" class="demoU1"></div> 
</div>
<div id="demoD" class="demoD"> 
	<div id="demoD1" class="demoD1"> 
		<a href="#"><img src="https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg" border="0" /></a>
		<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG211be3c9c31.jpg" border="0" /></a>
		<a href="#"><img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG21gic5474154.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei03.cfp.cn/creative/vcg/800/new/VCG2130b1b0044.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG41585832651.jpg" border="0" /></a>
		<a href="#"><img src="https://alifei02.cfp.cn/creative/vcg/800/new/VCG2118bb520c0.jpg" border="0" /></a>
	</div> 
	<div id="demoD2" class="demoD1"></div> 
</div>
<script>
var tabL=document.getElementById("demoL");
var tabL1=document.getElementById("demoL1");
var tabL2=document.getElementById("demoL2");
tabL2.innerHTML=tabL1.innerHTML;
var tabR=document.getElementById("demoR");
var tabR1=document.getElementById("demoR1");
var tabR2=document.getElementById("demoR2");
tabR2.innerHTML=tabR1.innerHTML;

/* 方法一，requestAnimationFrame省资源,不能调速度 */
var startState = 1;
/* 向左 */
/* function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
        tab.scrollLeft-=tab1.offsetWidth;
    else{
        tab.scrollLeft++;
    }
	if(startState) requestAnimationFrame(Marquee);
} */
/* 向右 */
/* function Marquee(){ 
	if(tab.scrollLeft<=0) 
		tab.scrollLeft+=tab2.offsetWidth;
	else{ 
		tab.scrollLeft--;
	}
	if(startState) requestAnimationFrame(Marquee);
} */

/* Marquee();
tab.onmouseover=function() {startState=0};
tab.onmouseout=function() {startState=1;Marquee();}; */

/* 方法二，比较蚝资源,能调速度 */
var speed=1;//数字越大速度越慢 
/* 向左 */
function MarqueeL(){
    if(tabL2.offsetWidth-tabL.scrollLeft<=0)
        tabL.scrollLeft-=tabL1.offsetWidth;
    else{
        tabL.scrollLeft++;
    }
}
var MyMarL=setInterval(MarqueeL,speed);
tabL.onmouseover=function() {clearInterval(MyMarL);};
tabL.onmouseout=function() {MyMarL=setInterval(MarqueeL,speed);};
/* 向右 */
function MarqueeR(){
	if(tabR.scrollLeft<=0)
		tabR.scrollLeft+=tabR2.offsetWidth
	else{
		tabR.scrollLeft--
	}
}
var MyMarR=setInterval(MarqueeR,speed);
tabR.onmouseover=function() {clearInterval(MyMarR);};
tabR.onmouseout=function() {MyMarR=setInterval(MarqueeR,speed);};
/* 向上 */
var tabU=document.getElementById("demoU");
var tabU1=document.getElementById("demoU1");
var tabU2=document.getElementById("demoU2");
tabU2.innerHTML=tabU1.innerHTML; //克隆demoU1为demoU2 
function MarqueeU(){
	if(tabU2.offsetTop-tabU.scrollTop<=0)//当滚动至demoU1与demoU2交界时
		tabU.scrollTop-=tabU1.offsetHeight;//demo跳到最顶端
	else{
		tabU.scrollTop++;
	}
}
var MyMarU=setInterval(MarqueeU,speed);
tabU.onmouseover=function() {clearInterval(MyMarU)};//鼠标移上时清除定时器达到滚动停止的目的
tabU.onmouseout=function() {MyMarU=setInterval(MarqueeU,speed)};//鼠标移开时重设定时器
/* 向下 */
var tabD=document.getElementById("demoD");
var tabD1=document.getElementById("demoD1");
var tabD2=document.getElementById("demoD2");
tabD2.innerHTML=tabD1.innerHTML;//克隆demo1为demo2
tabD.scrollTop=tabD.scrollHeight
function MarqueeD(){
	if(tabD1.offsetTop-tabD.scrollTop>=0)//当滚动至demo1与demo2交界时
		tabD.scrollTop+=tabD2.offsetHeight;//demo跳到最顶端
	else{
		tabD.scrollTop--
	}
}
var MyMarD=setInterval(MarqueeD,speed);
tabD.onmouseover=function() {clearInterval(MyMarD)};//鼠标移上时清除定时器达到滚动停止的目的
tabD.onmouseout=function() {MyMarD=setInterval(MarqueeD,speed)};//鼠标移开时重设定时器







 



 









/* 单个方块移动案例 */
function animationTest(){
	let animationId;
	const button = document.createElement("button");
	button.innerHTML = "停止动画"
	button.style.position = 'absolute'
	button.style.top = '150px';
	button.style.left = '0px';
	button.style.zIndex = '999999'
	button.onclick = () => {
		if(!!animationId){
			window.cancelAnimationFrame(animationId);
			button.innerHTML = "开始动画"
			animationId = void 0;
		}else{
			move()
			button.innerHTML = "停止动画"
		}
	}

	const div = document.createElement("div");
	div.style.width = '100px'
	div.style.height = '100px'
	div.style.position = 'absolute'
	div.style.top = '0px';
	div.style.left = '0px';
	div.style.backgroundColor = '#f00'
	div.style.zIndex = '999999'
    document.getElementById("demo").appendChild(div);
	/* document.body.appendChild(div); */
	document.body.appendChild(button);
	
	let distance = 0;
	function move(){
		distance++
		console.log(distance) // 打印当前帧，方块移动的距离
		div.style.left = distance + 'px'
		animationId = requestAnimationFrame(move); // 通知浏览器开始绘制下一帧的时候,继续执行move函数
	}
	move();
}
/* animationTest(); */

</script>
</body>
</html>

案例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	*{ margin:0; padding:0;}
	body{margin:100px auto 0; width:400px;}
	#box{width:400px; height:100px; overflow:hidden; border:solid 2px #000; padding:2px;}
	ul{list-style:none;overflow:hidden;}
	li {width:100px;height:100px; float:left;}
	.bg1{background-color:#F00;}
	.bg2{background-color:#0F0;}
	.bg3{background-color:#00F;}
	.bg4{background-color:#FF0;}
	.bg5{background-color:#0FF;}
	.bg6{background-color:#F0F;}
</style>
<script type="text/javascript">
//无缝滚动代码开始（div#box,ul,li标签组合）
var myTime=15;//毫秒
function scrollPicBox(str){
	var box=document.getElementById(str);
	var obj=box.children||box.childNodes
	obj=obj.item(0);
	obj.innerHTML += obj.innerHTML;
	var cn=obj.children||obj.childNodes;
	var ww=0;
	for(i=0;i<cn.length;i++){
		cn.item(i).onmouseover=function(){
			var myTimeId=this.parentNode.parentNode.getAttribute("myTimeId");
			clearTimeout(myTimeId);
		}
		cn.item(i).onmouseout=function(){
			var o=this.parentNode.parentNode;
			myTimeId=setTimeout("scrollPicShow('"+o.getAttribute("id")+"')",myTime);
			o.setAttribute("myTimeId", myTimeId);
		}
		ww+=cn.item(i).scrollWidth;
	}
	obj.style.width=ww+"px";
	scrollPicShow(str);
}
function scrollPicShow(str){
	var o=document.getElementById(str);
	o.scrollLeft++;
	if(o.scrollLeft>=o.scrollWidth/2) o.scrollLeft=0;
	var myTimeId=setTimeout("scrollPicShow('"+str+"')",myTime);
	o.setAttribute("myTimeId", myTimeId);
}
window.onload=function(){
	scrollPicBox("box");
}
</script>
</head>

<body>
<div id="box">
<ul>
	<li class="bg1"></li>
    <li class="bg2"></li>
    <li class="bg3"></li>
    <li class="bg4"></li>
    <li class="bg5"></li>
    <li class="bg6"></li>
</ul>
</div>
</body>
</html>

备注:用CSS3动画animation实现无限循环的无缝滚动

用CSS3实现无限循环的无缝滚动-蚊子-前端博客 (xiabingbao.com)

css3 animate动画每循环一次的时间间隔设置方法_animation 设置动画执行间隔时间-CSDN博客

CSS3中的动画属性详解_css3中动画中各个属性值以及作用-CSDN博客

CSS3动画animation_animation: auto ease 0s 1 normal none running none-CSDN博客文章来源地址https://www.toymoban.com/news/detail-791613.html

到了这里，关于前端多张图片无缝无限循环滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包