用JS实现的简单轮播图

佚名 7年前 (2019-05-06) 随笔 1400人围观抢沙发百度已收录

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>slideshow</title>
	<style type="text/css">
	*{
	margin:0;
	padding:0;
	}
	.frame{
	position: relative;
	width: 672px;
	height: 370px;
	/border:1px solid red;/
	margin: 0 auto;
	}
	.frame ul{
	list-style: none;
	}
	.frame ul li{
	display: none;
	}
	.leftbtn{
	width: 55px;
	height: 55px;
	position: absolute;
	left: 0;
	top: 150px;
	margin-top: -27px;
	background:url(images/slide-btnL.png) no-repeat;
	cursor: pointer;
	}
	.rightbtn{
	width: 55px;
	height: 55px;
	position: absolute;
	right: 0;
	top: 150px;
	margin-top: -27px;
	background:url(images/slide-btnR.png) no-repeat;
	cursor: pointer;
	}
	.circle{
	position: absolute;
	width: 100px;
	height: 10px;
	bottom: 22px;
	left: 50%;
	margin-left: -50px;
	}
	.circle ol{
	list-style: none;
	}
	.circle ol li{
	float: left;
	width: 7px;
	height: 7px;
	background: url(images/ico.png) no-repeat -137px -132px;
	margin-right: 13px;
	border-radius: 50%;
	cursor: pointer;
	}
	.frame ul li.checked{
	display: block;
	}
	.circle ol li.opt{
	background:url(images/ico.png) no-repeat -124px -132px;
	}
	</style>
	</head>
	<body>
	<div class="frame" >
	<ul id="Frame">
	<li class="checked"><img src="images/aaa.jpg"></li>
	<li><img src="images/bbb.jpg"></li>
	<li><img src="images/ccc.jpg"></li>
	<li><img src="images/ddd.jpg"></li>
	<li><img src="images/eee.jpg"></li>
	</ul>
	<div class="leftbtn" id="lbtn"></div>
	<div class="rightbtn" id="rbtn"></div>
	<div class="circle" id="dot">
	<ol>
	<li class="opt"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ol>
	</div>
	</div>
	<script type="text/javascript">
	var oframe = document.getElementById("Frame").getElementsByTagName("li");
	var olbtn = document.getElementById("lbtn");
	var orbtn = document.getElementById("rbtn");
	var odot = document.getElementById("dot").getElementsByTagName("li");
	var semaphore = 0;
	orbtn.onclick = function(){
	semaphore++;
	if (semaphore > 4) {
	semaphore = 0;
	}
	slideshow();
	}
	olbtn.onclick = function(){
	semaphore--;
	if (semaphore < 0) {
	semaphore = 4;
	}
	slideshow();
	}
	// IEFF!!!!!!!!!!!!!!!!!!!!!!
	for (var i = 0; i < odot.length; i++) {
	(function(i){
	odot[i].onmouseover = function(){
	semaphore = i;
	slideshow();
	}

	}(i))};

	function slideshow(){
	for (var i = 0; i < oframe.length; i++) {
	oframe[i].className = "";
	}
	oframe[semaphore].className = "checked";
	for (var i = 0; i < odot.length; i++) {
	odot[i].className = "";
	}
	odot[semaphore].className = "opt";
	}
	</script>
	</body>
	</html>