无缝滚动轮播

最新推荐文章于 2022-11-09 20:50:14 发布

原创最新推荐文章于 2022-11-09 20:50:14 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

前端攻城狮成长记录专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个轮播图的无缝滚动效果，包括图片布局、定时器控制以及鼠标交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

在这里插入图片描述

HTML代码

<div id="divall">
		<div class="div01">
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</div>
</div>

CSS样式

*{
			margin : 0;
			padding : 0;
		}
		img{
			width: 512px;
			height: 256px;
			float: left;
		}
		.div01{
			width: 2048px;
			height: 256px;
			position: absolute;
		}
		#divall{
			width: 700px;
			height: 256px;
			border: 1px solid #000;
			position: relative;
			overflow: hidden;
		}

JavaScript代码

var divall = document.getElementById(“divall”);
var div01 = document.getElementsByClassName(“div01”)[0];

		var div02 = document.createElement("div");
		div02.innerHTML = div01.innerHTML;
		div02.className = "div01";
		
		divall.appendChild(div02)   	//追加子元素
		
		var left1 = 0;
		var left2 = 2048;
		function step(){
			left1 -= 5;
			left2 -= 5;
			div01.style.left = left1 + "px";
			div02.style.left = left2 + "px";
			
			if(left1 <= -2048){
				left1 = 2048
			}
			if(left2 <= -2048){
				left2 = 2048
			}
		}

		var timer = setInterval (step,1)	//setInterval 设置循环定时器
		

		divall.onmouseover  = function(){    // onmouseover  鼠标移入
			clearInterval(timer)			// clearInterval  清除定时器

		}

		divall.onmouseout = function(){		//	onmouseout  鼠标移出
			timer = setInterval(step,100)
		}

// scrollWidth: 获取对象的滚动宽度
// offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

// console.log(divall.offsetWidth)
// console.log(divall.offsetHeight)