简单图片无缝滑动纯JS编写原理

最新推荐文章于 2022-03-27 19:42:17 发布
最新推荐文章于 2022-03-27 19:42:17 发布
阅读量340 收藏
点赞数
文章标签： JS图片滚动源码 图片无缝滚动源码  setInterval应用 定时器实现图片滚动JS JS代码：图片无限滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36963472/article/details/80953431
版权 
<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.div1{
			position: relative;margin:0 auto;overflow: hidden;width:712px; height:108px;background-color: pink;
		}
		.move_ul{
			list-style: none;position: absolute;
		}
		.move_ul li{
			float: left;width: 178px;height: 108px;
		}
		.l,.le{
			margin-right: 100px;
		}
	</style>
	<script>
		window.onload=function(){
			var oDiv=document.getElementsByClassName('div1')[0];
			var oUl=document.getElementsByClassName('move_ul')[0];
			var aLi=document.getElementsByTagName('li');
			var ol=document.getElementsByClassName('l')[0];
			var or=document.getElementsByClassName('r')[0];
			var le=document.getElementsByClassName('le')[0];
			var ri=document.getElementsByClassName('ri')[0];

			var timer=null;
			var speed=2;

			oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
			oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
			function move(){
				if(oUl.offsetLeft<-oUl.offsetWidth/2){
					oUl.style.left='0';
				}
				if(oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}

				oUl.style.left=oUl.offsetLeft+speed+'px';
			}
			timer=setInterval(move,30);
			oDiv.onmouseover=function(){
				clearInterval(timer);
			}
			oDiv.onmouseout=function(){
				timer=setInterval(move,30);
			}
			ol.onclick=function(){
				speed=-2;
			}
			or.onclick=function(){
				speed=2;
			}
			le.onclick=function(){
				oUl.style.left=oUl.offsetLeft-aLi[0].offsetWidth+'px';
			}
			ri.onclick=function(){
				oUl.style.left=oUl.offsetLeft+aLi[0].offsetWidth+'px';
			}

		}
	</script>
</head>
<body>
		<span class="l">向←滑动</span>
		<span class="r">向→滑动</span>
		<br />
		<span class="le">左一个</span>
		<span class="ri">右一个</span>
	<div class="div1">

		<ul class="move_ul">
			<li><img src="images/1.jpg" alt="" /></li>
			<li><img src="images/2.jpg" alt="" /></li>
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
		</ul>
	</div>
</body>
</html>

效果：

 

 

 

 

皮皮皮卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现轮播图图片无缝滚动原理
unlilalila的博客
10-20 5132
当轮播图滚动至现有图片最后一张时，需要让轮播图下一跳回到第一张图片，从而实现无限无缝循环滚动效果，但是为什么需要采用克隆来实现呢？为什么不直接从最后一张回到第一张？ 原理：在我们采用 num 变量计算图片移动的次数时，增加了一个 if 的判断条件，用于判断图片是否滚动至最后一张图片位置，如果没有复制或者克隆来新增一个子节点，循环就会在到达最后一张图时num 和left 变为 0 ，但是结束了 if 判断后会有一个 num 自增的动作，所以 num 变为 1 ，就会直接跳到第二张图，故需要克隆第一张图片作.
JavaScript实现图片无缝滚动效果
12-09
图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。 原理 以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。 设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这： if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0 }else{ n
js实现无缝轮播图
weixin_45571121的博客
09-11 3943
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
【原生js】详解轮播图之无缝滚动
热门推荐
zoro的博客
12-18 1万+
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。结构部分html部分<body> <!--展示窗口--> <div class="show_box"> <!--轮播图图片--> <div class="pic_box">
实现图片无缝滑动的原理
12-16
彻底理解图片滑动的原理，绝对值得收藏的文档！里面有屏幕尺子软件，边学边量边用
多图片无缝滑动
04-05
作者panyaorui，源码RayBannerView，支持无限循环，支持本地和网络图片两种加载方式（基于SDWebImage），支持定时滑动，支持xib界面自动布局，支持直接调转ViewController，支持监听图片点击事件功能说明。...
原生JS无缝滑动轮播图
10-16
主要为大家详细介绍了原生JS实现淡出淡入轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jqueryanimate图片无缝滑动javascript网页特效
06-22
jqueryanimate图片无缝滑动javascript网页特效，轮播广告，无缝轮播，精简代码，一看就懂
js插件实现图片滑动验证码
11-29
图片滑动验证码，逻辑是根据鼠标滑动轨迹，坐标位置，计算拖动速度等等来判断是否人为操作，当然下面的代码只是实现前端部分，只记录了拖动的坐标。 先上代码吧，做个备份记录 jquery.lgymove.js /** * Created...
原生JS实现无缝滚动轮播图
03-11
原生JS实现无缝滚动轮播图，使用相对定位进行无缝滚动，五张图的轮播只需五张图
原生JS实现无缝滚动轮播图（附加无注释版+详解版）
03-12
原生JS实现无缝滚动轮播图，最大的优点：使用相对定位进行无缝滚动，五张图的轮播只需五张图
js实现无缝循环滚动
11-23
本文实例为大家分享了js无缝循环滚动实现代码，供大家参考，具体内容如下 1、图片格式：260*400. 2、使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"> .row{ width: 1298px; height: 400px; border: 1px solid; box-shadow:2px 2px 2px #000; overflow: hidden; }
原生js滑动图片轮播切换效果代码
11-01
原生js滑动图片轮播切换效果代码
JS简单实现无缝滚动效果实例
10-21
主要介绍了JS简单实现无缝滚动效果,结合完整实例形式分析了javascript实现图片无缝滚动效果的实现技巧,涉及javascript结合时间函数定时触发动态修改页面元素属性的相关操作方法,需要的朋友可以参考下
网页效果 - 无缝滚动原理
qq_43612151的博客
06-30 539
无缝滚动 常用场景：公告栏滚动播报、轮播图无缝切换 在滚动元素的后面，复制一个相同的元素，让复制的元素填补出现的空白； 当复制元素滚动到与滚动元素相同的初始状态时，还原元素状态、实现无缝滚动 例子：公告栏滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
图片无缝滚动的原理和实例
一笑的博客
10-12 7710
无缝滚动的结构：一共两个盒子，第一个大盒子下套第二个大盒子，第二个大盒子下有4张图片，第一个大盒子宽度固定为600px，第二个大盒子宽度是400%; 原理：第一个盒子相对浮动，第二个盒子绝对浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0，用户看不到，以为是无缝滚动。 例子：<!DOCTYPE html> <html> <head lang=
Javascript 实现无缝切换/自动播放轮播图
阿蓬的个人博客
03-13 3142
一、功能需求 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮播图模块， 自动播放停止。 二、实现思路 1.整体分析 因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。 此时需要添加 load 事件。 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 显示隐藏 display 按
原生Js实现自动无缝轮播图
cty13697011482的博客
06-16 1459
javascript实现自动无缝轮播图 1、实现原理 轮播图实现原理是用一个大盒子组容器，里面包含一个小盒子，小盒子用来移动，小盒子里装着要轮播的图片，图片水平排放，当小盒子移动的时候带动图片一起移动，要想实现无缝轮播，则要在最后放一张与第一张一摸一样的图片，当图片滚动到最后一张时，用户会感觉这是第一张，然后再跳到第一张，这样用户就不会感觉图片是跳过去的，实现无缝轮播 2、实现效果 （图片上传有大小限制，这里就展示一部分。。。） 3、代码展示 3.1 网页结构布局（html代码） <!DOCTYPE
js滚动原理
ab_15的博客
03-27 988
原理 　　以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。 设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这： if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0 }else{ nav.scrollTop++; } 　　这里的nav.scrollTo
css实现图片无缝滚动，并且可以手动滑动
最新发布
06-09
要实现图片无缝滚动并且可以手动滑动，可以使用CSS的动画和滚动条属性。以下是一个简单的实现示例： HTML代码： ```html ``` CSS代码： ```css .scroll-container { width: 100%; overflow-x: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值