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

已于 2023-09-26 08:32:07 修改
阅读量1.3k 收藏 6
点赞数 2
分类专栏： html5 JavaScript css3 文章标签： 前端
于 2023-09-25 16:59:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwr888/article/details/133276542
版权
JavaScript 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
html5
9 篇文章 0 订阅
订阅专栏
css3
3 篇文章 0 订阅
订阅专栏

想必大家都注意到<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博客

cwr888
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML无缝滚动效果实现
weixin_51695739的博客
06-18 828
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="common.c
html图片无缝循环滚动
11-28
图片无缝循环滚动，可自己修改方向
单向无限循环滚动
03-27
一款无限循环单向滚动图片，由于项目需要在网上找了大半天，各种修改后实现，传上来给大家分享分享，免得找不到。
JS实现div内部的文字或图片自动循环滚动代码
10-27
在某些情况下需要这样的功能:使用JS实现div内部的文字或图片自动循环滚动，接下来为大家详细介绍下实现方法，感兴趣的朋友可以参考下哈
图片不断向左循环滚动js特效代码
01-23
图片不断向左循环滚动js特效代码
html5 原生虚拟滚动,原生JavaScript实现的无缝滚动功能详解
weixin_28877107的博客
06-04 562
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考，具体如下：无缝轮播(原生JavaScript)一：HTML部分：<>二、CSS部分* {margin: 0;padding: 0;}ul li {list-style: none;}.clearfix {zoom: 1;}.clearfix:after {display: block;clear: both...
使用HTML+CSS实现图片滚动效果
m0_46195138的博客
02-29 2万+
使用HTML+CSS实现图片滚动效果 之前用js实现过图片切换的效果，今天实现图片滚动的特效，这里不包含图片的切换。 直接上代码： <div class="loopimg"> <ul> <li> <img src="img/运动/运动 - 21.jpg" height="200px"/> ...
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 375
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
前端页面实现图片轮播滚动效果
qq_30908729的博客
06-03 5077
1.滚动效果：http://www.yayihouse.com/taobao.html 2.完整html页面代码： <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片循环滚动</title> <style> #box div, box ul,b..
html之marquee滚动标签详解——实现无缝滚动跑马灯效果
weixin_44867717的博客
12-05 6037
html之marquee滚动标签详解——实现无缝滚动跑马灯效果 Vue3.0 无缝滚动组件：vue3-seamless-scroll vue3.0滚动的table组件：vue3-scroll-table ——Demo: https://namewjp.github.io/vue3-scroll-table/ Marquee标记用于在可用浏览区域中滚动文本。 容器标签语法： <marquee></marquee> 1、示例 <marquee><font size=+
在html中使用js实现图片的无缝滚动（四种状态）
梁辰兴的博客
12-01 6081
获取整个ul和ul下面的所有li， 把ul里面的li内容添加一份，因为需要完成图片滚动效果所以需要二份完成无缝对接， 定义初始速度。设置定时器 在定时中进行判断 实现原理：因为ul是跟着父元素div进行定位的，所以ul的offsetleft的值初始值为0。只需要改变ul的left值就可以完成滚动效果 当ul的offsetleft值大于0的时候说明图片正在向右滚动，此时只需要把当前left值变成整个盒子的一半。并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接。当uL的offset值小于负的此时盒
基于jQuery的图片上下左右无缝连续循环滚动插件源码.zip
11-10
基于jQuery的图片上下左右无缝连续循环滚动插件源码.zip
web-JQuery无缝图片滚动
02-21
兼容浏览器： IE6及IE6以上，火狐，谷歌，360，QQ，等主流浏览器。 功能： 无缝滚动图片，鼠标移上时停止滚动，鼠标移出时恢复滚动，配置简单易用。
HTML5无限滚动
Methun
03-23 1485
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 600
h5 table自动滚动的方法
lfl18326162160的博客
10-10 899
库位品种款式颜色数量itemCode
Html笔记——实现一组图片循环且首尾相连的滚动效果
热门推荐
PettyKoKo
11-02 4万+
设计思想：在一个Div内存放两个相同内容（使用一行多列表格）作为一个滚动对象，并将超出的宽度的内容隐藏，在JS脚本中定义Div向移动的方法（水平坐标加1）。当第一个内容完全消失（即Div向左移动的距离达到该Div的宽度，此时第二个内容完全显示)时，将滚动条的坐标复位，开始新的一轮。 代码如下： <html> <head> <meta http-equiv="C...
前端实战：小实例2——滚动轮播图
weixin_43328954的博客
06-07 1658
前言 实现思路 用 div 封装轮播图，用 img 标签放置所有图片，图片均初始化为不可见（display : none） HTML + CSS + JavaScript
利用HTML+CSS实现轮播图效果
m0_65192155的博客
08-21 3191
利用html+css实现简易轮播图效果。
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 388
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
写一个前端图片横向无限循环滚动，鼠标移入暂停，移出暂停结束
05-31
{ shi = 0; } if(mode == 0) //如果是正常模式 { Out_Char(4, shi); } else //如果是闹钟设置模式 可以使用 CSS3 的动画来实现这个效果，具体步骤如下： 1. 创建一个容器元 { Out_Char(4, alarm_hour); //显示设置的闹钟时间 } } if(mode == 素，将要滚动的图片都放到容器内。 2. 使用 CSS3 的 `animation` 属性实现动画0) //如果是正常模式 { Out_Char(7, fen); } else //如果是，设置动画时间、动画类型、循环次数等参数。 3. 在 `@keyframes` 中定义动画闹钟设置模式 { Out_Char(7, alarm_min); //显示设置的闹钟时间 } 的关键帧，包括起始状态和结束状态。 4. 通过 JavaScript 监听鼠标移入和移出事件 } if(mode == 0) //如果是正常模式 { Out_Char(10, miao); } else //如果是闹钟设置模式 { Out_Char(10, alarm_sec); //显示设置的，当鼠标移入时暂停动画，当鼠标移出时恢复动画。 下面是一个简单闹钟时间 } //检查是否到达闹钟时间 if(mode == 0 && shi == alarm_hour的实现代码： HTML： ```html <div id="container"> <img src="image1.jpg"> <img src=" && fen == alarm_min && miao == alarm_sec) { //到达闹钟时间，发出警报 //image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5这里可以添加蜂鸣器等外部设备的控制代码 } } }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值