商城主页轮播图的制作（自动执行）_制作某围棋商城首页轮播图片,要求:隔三秒播放下一张图片,共5张图片-优快云博客

本文分享了一种使用HTML、CSS和JavaScript实现轮播图的方法，通过动态调整图片宽度完成自动轮播效果，适用于网页设计爱好者。

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

闲来无事，做一主页业轮播图玩玩，废话不多述，直接撸代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" href="./style.css" rel="stylesheet" />
		<script>
			var x = 1;
			var y = 2;
			var count = 44;
			function alterImg(){
				
				leftdiv = document.getElementById("my0" + x);
				rightdiv = document.getElementById("my0" + y);
				
				leftwidth = leftdiv.style.width;
				rightwidth = rightdiv.style.width;
				//console.log(leftwidth);
				//console.log(rightwidth);
				//alert(leftwidth);
				leftw = leftwidth.substring(0,leftwidth.indexOf("p"));
				if(x == 5){
					console.log(rightdiv);
					rightdiv.style.float="right";
				}else{
					document.getElementById("my01").style.float="left";
				}
				if(leftw == 0){
					if(count != 0){
						count--;
					}else{
						x = x==5 ? 1 : x+1;
						y = y==5 ? 1 : y+1;
						count = 44;
					}
					
				}else{
					rightw = rightwidth.substring(0,rightwidth.indexOf("p"));
					//alert(leftw);
					leftdiv.style.width = (leftw - 20) + "px";
					rightdiv.style.width =(Number(rightw) + 20) + "px";
				}
				
				
			}
		function autoAlter() {
			//每200毫秒，就让当前左侧的图爱你缩小20宽，当前右侧的图片扩大20宽
			window.setInterval(alterImg,50);
			//2秒=2000毫秒=40个50毫秒
		}	
			
		</script>
	</head>
	<body onload="autoAlter()">
		
		<!-- <input type="button" value="执行轮播" onclick="autoAlter()" /> -->
		<div style="width: 500px; height: 300px;">
			<div id="my01" style="float:left; width: 500px; height: 300px;">
				<img src="image/p1.jpg" title="美景" />
			</div>
			<div id="my02" style="float:left; width: 0px; height: 300px;">
				<img src="image/p2.jpg" title="美女" />
			</div>
			<div id="my03" style="float:left; width: 0px; height: 300px;">
				<img src="image/p3.jpg" title="小草" />
			</div>
			<div id="my04"style="float:left; width: 0px; height: 300px;">
				<img src="image/p4.jpg" title="草原" />
			</div>
			<div id="my05"style="float:left; width: 0px; height: 300px;">
				<img src="image/p5.jpg" title="小猫" />
			</div>
		</div>
	</body>
</html>