轮播图

最新推荐文章于 2022-12-13 14:25:50 发布

2197

最新推荐文章于 2022-12-13 14:25:50 发布

阅读量117

点赞数

本文介绍了一种使用HTML、CSS及JavaScript实现图片无缝轮播的方法。通过将图片平铺并仅显示其中一张，其余图片被隐藏的方式创建轮播效果。文章详细说明了如何通过计算偏移量并利用定时器自动播放或通过点击事件切换图片。

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

参考博客：https://www.cnblogs.com/LIUYANZUO/p/5679753.html

原理：

一系列大小相等的图片平铺，利用css只显示一张图片，其余隐藏。通过计算偏移量利用定时器自动播放，或通过手动点击事件切换图片

html方面：

div包含div，第二层div包含img，

css方面：

1.最外层的div contain只显示一个图片的大小，overflow:hidden

2.因为是无缝滚动，将最后一张图放在第一张的前面，同时复制第一张图放在最后一张的后面，并且将包裹图片的div向左移动一个图片的像素（用style=“left：-图片像素”）并将其宽度设置为能包含所有图片的宽度

3.将img浮动，使其在一行平铺

js方面：

获取第二层的div,改变它的偏移量来显示不同的图片，但是要对偏移量做判断不然会有大片空白

当他的偏移量到达最后一幅图得时候，使他的偏移量位于显示第一张图时的偏移量

当他的偏移量到达第一幅图得时候，使他的偏移量位于显示最后一张图时的偏移量

HTML

<div id="contain">
	<div id="list" style="left:-200px">
		<img src="img/5.jpg" width="200" height="200"/>
		<img src="img/1.jpg" width="200" height="200"/>
		<img src="img/2.jpg" width="200" height="200"/>
		<img src="img/3.jpg" width="200" height="200"/>
		<img src="img/4.jpg" width="200" height="200"/>
		<img src="img/5.jpg" width="200" height="200"/>
		<img src="img/1.jpg" width="200" height="200"/>
	</div>
	<a id="left">&lt;</a>
</div>

css

*{
	margin:0;
	padding:0;
	text-decoration:none;
	font-size:0;
}
#contain{
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative;
}
#list{
	position:absolute;
	width:1400px;
}
#list img{
	float:left;
}

a{
	position:relative;
	font-size:20px;
	color:#000;
	z-index:2;
	cursor:pointer;
}

var list=document.getElementById("list");
var left=document.getElementById("left");
var contain=document.getElementById("contain");

function animate(offset){
	var newLeft=parseInt(list.style.left)+offset;
	if(newLeft<-1000){
		list.style.left=-200+"px";	
	}else if(newLeft>-200){
		list.style.left=-1000+"px";
	}else{
		list.style.left=newLeft+"px";
	}
}

left.onclick=function(){
	animate(-200)
}

var timer;
function play(){
	timer=setInterval(function(){
      animate(-200);
	},1500)
}
play();

function stop(){
	clearInterval(timer);
}
contain.onmouseover=stop;
contain.onmouseout=play;