用JS实现的简单轮播图

最新推荐文章于 2023-08-09 23:10:39 发布

9栋108

最新推荐文章于 2023-08-09 23:10:39 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ljy0414/p/10819763.html

版权

<!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>

因为上传不了整个文件包，所以只有代码，里面的图面可以换成自己的路径。我已经测试了效果。希望大神们给我改进的意见。

转载于:https://www.cnblogs.com/ljy0414/p/10819763.html

9栋108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现的简单轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slideshow</title> <style type="text/css"...
复制链接

扫一扫