js实现轮播图（下面附有高清图）

最新推荐文章于 2021-06-09 22:26:07 发布

Denial_learn

最新推荐文章于 2021-06-09 22:26:07 发布

阅读量688

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/Denial_learn/article/details/100936453

版权

html 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

我所实现的和别的博主大大不太一样，我所采用的的是z-index方式以及浮动的方式，实现的轮播图

实现的效果图为：
在这里插入图片描述

html主要实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/轮播图.css"/>
		<script src="js/轮播图.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="all">
			<img src="img/girl2.jpg"/>
			<img src="img/girl3.jpg"/>
			<img src="img/girl4.jpg"/>
			<img src="img/girl5.jpg"/>
			<img src="img/girl6.jpg"/>
			<span id="left">&lt;</span>
			<span id="right">&gt;</span>
			<div id="spot">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

css样式代码：

#all{
	height: 500px;
	width: 350px;
	margin: 0px auto;
	border: 1px solid gainsboro;
	position: relative;
}
img{
	height: 500px;
	width: 350px;
	/*float: left;*/
	position: absolute;
	z-index: -2;
}
span{
	display: inline-block;
	/*z-index: 5;*/
	height: 40px;
	width: 25px;
	line-height: 40px;
	text-align: center;
	background-color: lightgray;
}
#left{
	border-radius: 0px 40px 40px 0px;
	float: left;
	/*margin-left: auto;*/
	margin-top: 230px;
	cursor: pointer;
}
#right{
	border-radius: 40px 0px 0px 40px;
	float: right;
	margin-top: 230px;
	cursor: pointer;
}
ul,li{
	list-style-type: none;
}
li{
	height: 20px;
	width: 20px;
	background-color: #CCCCCC;
	display: inline-block;
	border-radius: 20px;
	margin-right: 10px;
}
#spot{
	text-align: center;
	margin-top: 460px;
}

js效果代码：

window.onload=function(){
	var i = 0;
	var img;
	var li;
	var time1;
	function time(){
			time1=setInterval(function(){//自动拨动
				
			img = document.getElementsByTagName("img")[i];
			img.style.zIndex=-2;
			
			li = document.getElementsByTagName("li")[i];
			li.style.backgroundColor="#CCCCCC";
			i++;
			if(i==5){
				i=0;
			}
			if(i>=0){
				li=document.getElementsByTagName("li")[i];
				li.style.backgroundColor="red";
				img = document.getElementsByTagName("img")[i];
				img.style.zIndex=-1;
			}else if(i==0){
				li=document.getElementsByTagName("li")[4];
				li.style.backgroundColor="red";
				img = document.getElementsByTagName("img")[4];
				img.style.zIndex=-1;
			}
		},1500);
	};
	time();
	var left = document.getElementById("left");
	left.onclick = function(){
		img = document.getElementsByTagName("img")[i];
		img.style.zIndex=-2;
		li = document.getElementsByTagName("li")[i];
		li.style.backgroundColor="#CCCCCC";
		i--;
		if(i>=0){
			li=document.getElementsByTagName("li")[i];
			li.style.backgroundColor="red";
			img = document.getElementsByTagName("img")[i];
			img.style.zIndex=-1;
		}else if(i==-1){
			li=document.getElementsByTagName("li")[4];
			li.style.backgroundColor="red";
			img = document.getElementsByTagName("img")[4];
			img.style.zIndex=-1;
		}
		if(i==-1){
			i=4;
		}
	}
	var right = document.getElementById("right");
	right.onclick = function(){
		img = document.getElementsByTagName("img")[i];
		img.style.zIndex=-2;
		li = document.getElementsByTagName("li")[i];
		li.style.backgroundColor="#CCCCCC";
		i++;
		if(i==5){
			i=0;
		}
		if(i>=0){
			li=document.getElementsByTagName("li")[i];
			li.style.backgroundColor="red";
			img = document.getElementsByTagName("img")[i];
			img.style.zIndex=-1;
		}else if(i==0){
			li=document.getElementsByTagName("li")[0];
			li.style.backgroundColor="red";
			img = document.getElementsByTagName("img")[0];
			img.style.zIndex=-1;
		}	
	}
	var list =document.getElementsByTagName('li');
	for(var j=0;j<5;j++){
		(function(j){
			list[j].onmouseover=function () {
			clearInterval(time1);
			li=document.getElementsByTagName("li")[i];
			li.style.backgroundColor="#CCCCCC";
			img = document.getElementsByTagName("img")[i];
			img.style.zIndex=-2;
			this.style.backgroundColor="red";
			img = document.getElementsByTagName("img")[j];
			img.style.zIndex=-1;
			} 
			list[j].onmouseout=function () {
				i=j;
				time();
			}
		})(j);
	}
}

采用的图片：
在这里插入图片描述