JavaScript之一个简单的轮播图-CSDN博客

本文链接：https://blog.csdn.net/weixin_45861504/article/details/105082762

JavaScript之一个简单的轮播图
图片请自备

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的轮播图</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
	width: 800px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#focus{
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
}
#focus ul{
	height: 380px;
	position: absolute;
}
#focus ul li{
	float: left;
	width: 800px;
	height: 280px;
	overflow: hidden;
	position: relative;
	background: #000;
}
#focus ul li div{
	position: absolute;
	overflow: hidden;
}
#focus .preBtn{
	width: 45px;
	height: 100px;	
	left: 0;
	top:90px;
	background:url(images/spirte.png) no-repeat 0 0;
	background-color:#000;
	cursor: pointer;
	opacity:0.4;
	filter:alpha(opacity=40);
}
#focus .nextBtn{
	width: 45px;
	height: 100px;
	right:0px;
	top:90px;
	background:url(images/spirte.png) no-repeat right top;
	background-color:#000;
	cursor: pointer;	
	opacity:0.4;
	filter:alpha(opacity=40);
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="focus">
    <ul>
      <li>
		<a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
      	<div class="preBtn" id="showPre"></div>
      	<div class="nextBtn" id="showNext"></div> 
      </li>      
    </ul>     
  </div>
</div>
<script type="text/javascript">
	//用于存放图片集
	var pic_list = [
		"images/01.jpg",
		"images/02.jpg",
		"images/03.jpg",
		"images/04.jpg",
		"images/05.jpg"
	];
	var pic = document.getElementById("pic");		//获取到img标签
	var index = 0;									//索引
	function auto(){								//自动播放
		index++;
		if(index==pic_list.length){
			index = 0;
		}
		pic.src = pic_list[index];
	}
	var left = document.getElementById("showPre");		//左
	left.onclick = function(){
		clearTimeout(auto);
		index--;
		if(index<=0){
			index = 1;
		}
		pic.src = pic_list[index];
	}
	var right = document.getElementById("showNext");	//右
	right.onclick = function(){
		clearTimeout(auto);
		index++;
		if(index==pic_list.length){
			index = 0;
		}
		pic.src = pic_list[index];
	}
	setInterval(auto,3000);
</script>
</body>
</html>