麻烦老师帮忙看看我为什么不能实现图片切换效果

来源：3-4 图片自动轮播

森林sng

2020-07-29 10:45:55

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片轮播</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	
</head>
<body>
	<div class="main" id="main">
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		<div class="button left"></div>
		<div class="button right"></div>
		<div class="dots">
			<span class="dots-active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

var banner=document.getElementById("banner");
var arrayDiv=banner.getElementsByTagName("div");
/*图片自动轮播*/
function slideImg(){
	var main=document.getElementById("main");
	/*鼠标停留时执行定时器*/
	main.onmouseover=function(){
		/*清除定时器*/
	}
	/*鼠标离开时执行定时器*/
	main.onmouseout=function(){
		var index=0;
		var timer=setInterval("changeImg()",2000);
	}
}
/*切换图片*/
function changeImg(){
	for(var i=0;i<arrayDiv.length;i++){
		arrayDiv[i].style.display="none";
	}
	arrayDiv[index].style.display="block";
	if(index<arrayDiv.length){
		index++;
	} else{
		index=0;
	}
}

*{
	margin:0px;
	padding:0px;
}
body{
	font-family:"微软雅黑";
	color:#14191e;
}
ul{
	list-style:none;
}
.main{
	width:1200px;
	height:460px;
	margin:30px auto;
	overflow:hidden;
	position:relative;
}
.banner{
	width:1200px;
	height:460px;
	overflow:hidden;
	position:relative;
}
.banner a .banner-slide{
	width:1200px;
	height:460px;
	background-repeat:no-repeat;
	float:left;
	display:none;
}
.banner a .slide-active{
	display:block;
}
.banner a .slide1{
	background-image:url(../image/bg1.jpg);
}
.banner a .slide2{
	background-image:url(../image/bg2.jpg);
}
.banner a .slide3{
	background-image:url(../image/bg3.jpg);
}
.main .button{
	background-image:url("../image/arrow.png");
	background-repeat: no-repeat;
	background-position: center center;
	width:40px;
	height:80px;
	position:absolute;
	left:224px;
	top:50%;
	margin-top:-40px;
	cursor: pointer;
}
.main .left{
	transform:rotate(180deg);
}
.main .right{
	left:auto;
	right:0px;
}
.main .button:hover{
	background-color:rgba(3,3,3,0.5);
	
}
.main .dots{
	position:absolute;
	right:0px;
	bottom:24px;
}
.main .dots span{
	display:inline-block;
	width:10px;
	height:10px;
	margin-right:20px;
	border-radius:50%;
	background-color:rgba(7,17,27,0.4);
	box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
	cursor: pointer;
}
.main .dots .dots-active{
	background-color:#fff;
	box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
}

写回答

1回答

森林sng

提问者

2020-07-29

我已经知道了老师，少了一个加载事件