使用html+css+js实现轮播图（图片数量可随意改变）

最新推荐文章于 2023-06-05 19:20:20 发布

冯邵封

最新推荐文章于 2023-06-05 19:20:20 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44072651/article/details/100577529

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用html+css+js实现轮播图（图片数量可随意改变）

提示：讲道理，像这种不是自己写的代码会有点难看懂（主要我写的太乱了这个），所以有需要就用吧，那个地方需要修改了在改进。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播</title>
		<style type="text/css">
			button{
				margin-left: 50%;
			}
			*{
				padding: 0px;
				margin: 0px;
				
			}
			.top_blast:after{
				content: " ";
				display: table;
				clear: both;
			}
			
			
			ul a img{
				width: 600px;
			}
			ul{
				
				list-style: none;
				position: absolute;
			}
			ul li{
				float: left;
				margin-right: 10px;
			}
			#kuang{
				width: 600px;
				border: 2px solid black;
				margin: 50px auto;
				position: relative;
			}
			

		</style>
	</head>
	<body>
		<button id="right">右移</button>
		<br  /><br  />
		<div id="kuang" class="top_blast">
			<ul class="top_blast">
				<li class="photo"><a href="#"><img src="img/ONE.gif" /></a></li>
				<li class="photo"><a href="#"><img src="img/TWO.gif" /></a></li>
				<li class="photo"><a href="#"><img src="img/THREE.gif" /></a></li>
				<li class="photo"><a href="#"><img src="img/THREE.gif" /></a></li>
			</ul>
			
		</div>
		<script type="text/javascript">
			var middle_image = document.getElementsByClassName("photo");
			var count = middle_image.length;
			var one_width = parseInt(getComputedStyle(middle_image[1], null)["width"]);
			var middle_len = count*(one_width+10);
			
			var ul_biao = document.getElementsByTagName("ul");
			ul_biao[0].style.width = middle_len + "px";
			var image_height = ul_biao[0].offsetHeight;
			var box = document.getElementById("kuang")
			box.style.height = image_height+"px";
			
		
			var right_button = document.getElementById("right");
			var index = 1;
			
			var speed;
			var timer;
			
			right_button.onclick=function(){
				var num = parseInt(ul_biao[0].offsetLeft);
			if (num%610==0){
				if(index==1){
					var speed = 50;
					var middle = 0
					timer=setInterval(function(){
						var now_pos = parseInt(ul_biao[0].offsetLeft);
						if(middle >= (count-1)*610-50){
							speed = ((count-1)*610)%50;
							clearInterval(timer);
						}
						ul_biao[0].style.left = now_pos - speed + "px";
						now_pos = parseInt(ul_biao[0].offsetLeft);
						middle += speed;
					
					}, 50);
					index = count;
					
				}else{
					var speed = 20;
					var middle = 0;
					timer=setInterval(function(){
						var now_pos = parseInt(ul_biao[0].offsetLeft);
						if(middle >= 600){
							speed = 10;
							clearInterval(timer);
						}
						ul_biao[0].style.left = now_pos + speed + "px";
						middle += speed;
					
					}, 50);
					index -= 1;	
				}
				
			}
			}
		</script>
	</body>
</html>