javascript图片切换

最新推荐文章于 2022-08-15 20:44:53 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2022-08-15 20:44:53 发布

阅读量128

点赞数 1

本文链接：https://blog.csdn.net/weixin_43889484/article/details/103638930

版权

代码：

<!DOCTYPE html>
<html>
<head>
	<title>图片切换</title>
	<meta charset="utp-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		*{margin: 0px;
		  padding: 0px;
		  list-style: none;
		  text-decoration: none;
		  }
		  #flash{
		  	width: 520px;
		  	height: 280px;
		  	margin: 0 auto;
		  	position: relative;
		  	border: 1px solid black;
		  }
		  #flash img{
		  	width: 100%;
		  	height: 100%;
		  	position: absolute;
		  	left: 0px;
		  	top: 0px;
		  	display: none;
		  }
		  #flash ul{
		  	width: 150px;
		  	height: 25px;
		  	border-radius: 20px;
		  	background-color: : rgba(255,255,255,0.5);
		  	position: absolute;

		  	left: 35%;
		  	bottom: 10%;

		  }
		  #flash ul li{
		  	width: 12px;
		  	height: 12px;
		  	margin-top: 5px;
		  	background-color: #fff;
		  	border-radius: 50%;
		  	margin-left: 15px;
		  	float: left;
		  }
		  #flash ul .li_1{
		  	background-color: #f40;
		  }
		  #flash .span-r{
		  	width: 50px;
		  	height: 50px;
		  	border-radius: 50%;
		  	position: absolute;
		  	right: 2%;
		  	top: 45%;
		  	background-color:rgba(255,255,255,0.5);

		  }
		  #flash .span-r span{
		  	width: 100%;
		  	height: 100%;
		  	color: rgba(0,0,0,0.5);
		  	font-size: xx-large;
		  	font-weight: 700;
		  	line-height: 50px;
		  	margin-left: 15px;
		  	cursor: pointer;
		  }
		  #flash .span-l{
		  	width: 50px;
		  	height: 50px;
		  	border-radius: 50%;
		  	position: absolute;
		  	left: 2%;
		  	top:45%;
		  	background-color: rgba(255,255,255,0.5);
		  }
		  #flash .span-l span{
		  	width: 100%;
		  	height: 100%;
		  	color: rgba(0,0,0,0.5);
		  	font-size: xx-large;
		  	font-weight: 700;
		  	line-height: 50px;
		  	margin-left: 15px;
		  	cursor: pointer;
		  }

	</style>
</head>
<div id="flash">
	<img src="shirt_1.jpg" alt="" style="display: block;">
	<img src="shirt_2.jpg" alt="">
	<img src="shirt_3.jpg" alt="">
	<img src="shirt_4.jpg" alt="">
	<img src="time.jpg" alt="">
	<ul>
		<li class="li_1"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div class="span-r">
		<span>></span>
	</div>
	<div class="span-l">
		<span><</span>
	</div>
</div>
<body>

<script type="text/javascript">
	var div=document.getElementById('flash');
	var img=document.getElementsByTagName('img');
	var ul =div.getElementsByTagName('ul')[0];
	var li=ul.getElementsByTagName('li');
	var div_r=document.getElementsByTagName('div')[1];
	var div_l=document.getElementsByTagName('div')[2];
	var len=img.length;
	var count=0;//显示序号
	function run() {
		count++;
		count =count==5?0:count;
		for(var i=0;i<len;i++){
			img[i].style.display='none';
		}
		img[count].style.display='block';
		for(var i=0;i<li.length;i++){
			li[i].style.backgroundColor="#fff";
		}
		li[count].style.backgroundColor="#f40";
	}
	var timer=setInterval(run,1000);
	div.onmouseover=function(){
		clearInterval(timer);
	}
	div.onmouseleave=function(){
		timer=setInterval(run,1000);
	}
	for(var i=0;i<len;i++){
		li[i].index=i;
		li[i].onmouseenter=function(){
			for(var i=0;i<len;i++){
				li[i].style.background="#fff";
				img[i].style.display='none';
			}
			this.style.background='#f40';
			img[this.index].style.display='block';
		}
	}
	div_r.onclick=function(){
		run();
	}
	function reverse(){
		count--;
		count=count==-1?4:count;
		for(var i=0;i<len;i++){
			img[i].style.display='none';
		}
		img[count].style.display='block';
		for(var i=0;i<li.length;i++){
			li[i].style.backgroundColor="#fff"
		}
		li[count].style.backgroundColor="#f40";
	}
	div_l.onclick=function(){
		reverse();
	}
	

</script>
</body>
</html>