原生态javascript编写幻灯片图片轮换轮播-CSDN博客

本文链接：https://blog.csdn.net/cdcdhj/article/details/116312071
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head><title></title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	.block{
		width:800px;
		height:450px;
		marign:50px auto;
		position:relative;
		overflow:hidden;
		box-sizing:border-box;
	}
	.box_big{
		position:absolute;
		width:4000px;
		height:450px;
	}
	.nav{
		transition:margin-left 0.2s linear;
	}
	.box{
		float:left;
		width:800px;
		height:450px;
	}
	img{
		width:100%;
		height:100%;
	}
	.spot{
		position:absolute;
		width:100%;
		text-align:center;
		bottom:5px;
	}
	.spot_list{
		width:30px;
		height:30px;
		font-size:20px;
		display:inline-block;
		border:1px solid gray;
		border-radius:5px;
		line-height:30px;
		font-weight:bold;
		background:rgba(255,255,255,0.5);
		margin:5px;
	}
	.btn{
		width:100%;
		height:80px;
		position:absolute;
		margin:0 auto;
		top:160px;
	}
	.left_btn,.right_btn{
		width:30px;
		height:80px;
		a-index:10;
		background:rgba(255,255,255,0.5);
		text-align:center;
		line-height:80px;
		border-radius:8px;
	}
	.left_btn{
		float:left;
	}
	.right_btn{
		float:right;
	}
</style>
</head>
<body>
<div class="block">
	<div class="box_big">
		<div class="box"><img src="images/1.jpg" alt=""/></div>
		<div class="box"><img src="images/2.jpg" alt=""/></div>
		<div class="box"><img src="images/3.jpg" alt=""/></div>
		<div class="box"><img src="images/4.jpg" alt=""/></div>
		<div class="box"><img src="images/5.jpg" alt=""/></div>
	</div>
	<div class="spot">
		<div class="spot_list">1</div>
		<div class="spot_list">2</div>
		<div class="spot_list">3</div>
		<div class="spot_list">4</div>
		<div class="spot_list">5</div>
	</div>
	<div class="btn">
		<div class="left_btn"><span><</span></div>
		<div class="right_btn"><span>></span></div>
	</div>
</div>
<script language="javascript">
var box=document.getElementsByClassName('box_big')[0];
var spot=document.getElementsByClassName('spot_list');
var block=document.getElementsByClassName('block')[0];
var left_btn=document.getElementsByClassName('left_btn')[0];
var right_btn=document.getElementsByClassName('right_btn')[0];
var time=null;
var count=0;
function showtime(){　　　//设置轮播时间
	time=setInterval(function(){
		mate();
	},1000);
}
function mate(){　　　//每一秒按钮数字的样式和切换宽度
	box.className="box_big nav";
	spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
	count++;
	spot[count > box.children.length-1 ? 0 :count].style.background="rgba(91,91,91,0.8)";
	box.style.marginLeft=(count * -800)+"px";
	setTimeout(function(){
		if(count>box.children.length-1){
			count=0;
			box.className="box_big";
			box.style.marginLeft="0px";
		}
	},1000);
}
block.onmouseenter=function(){　　//鼠标进入时间清除
	clearInterval(time);
};
block.onmouseleave=function(){　　//鼠标退出时开始计时
	showtime();
};
for(var i=0;i<spot.length;i++){　//自动轮播，当鼠标进入那个数字按钮获得i值，然后改变样式，和切换宽度
	spot[i].index=i;
	spot[i].onmouseenter=function(){
		this.style.background="rgba(91,91,91,0.8)";
		spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
		count=this.index;
		box.style.marginLeft=(count * -800)+"px";
	};
}
left_btn.onclick=function(){　　　//左移按钮
	mate();
};
right_btn.onclick=function(){　　　//右移按扭
	spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
	count--;
	if(count<0){
		box.className="box_big";
		count=box.children.length-1;
		box.style.marginLeft="-800px";
	}
	setTimeout(function(){
		box.className="box_big nav";
		box.style.marginLeft=(-800 * count)+"px";
		spot[count].style.backgroundColor="rgba(91,91,91,0.8)";
	});
};
</script>
</body>
</html>