使用js实现简单轮播图

最新推荐文章于 2020-02-16 22:55:18 发布

XiaopinOo

最新推荐文章于 2020-02-16 22:55:18 发布

阅读量380

点赞数

分类专栏：前端文章标签：简单轮播图的实现

本文链接：https://blog.csdn.net/XiaopinOo/article/details/78546018

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<style>
			#lunbo{
				position: relative;
				width: 500px;
				height: 300px;
			}
			#lunbo img{
				position: absolute;
			}
			#xiaoyuan{
				width: 300px;
				height: 50px;
				position: relative;
			}
			#xiaoyuan li{
				width: 10px;
				height: 10px;
				list-style:none;
				border-radius: 50%;
				background: black;
				float: left;
				margin: 0px 10px;

			}
			#xiaoyuan ul{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top:-5px;
				margin-left: -75px;
				padding: 0px;
				width: 150px;
				height: 10px;
			}#haha{
				position: absolute;
				bottom: 30px;
				left: 50%;
				margin-left: -150px;

			}
		</style>
	</head>
	<body>
		<input type="submit" submit="return false;"/>
		<div id="lunbo">
		<img id="img" src="imgs/0.png" height="600" width="1920" style="width:500px;height:300px;" />
		<div id="haha">
			<div id="xiaoyuan">
				<ul>
					<li style="background:green" οnmοusemοve="mousemove(this)" οnmοuseοut="mouseout(this)"></li>
					<li οnmοusemοve="mousemove(this)" οnmοuseοut="mouseout(this)"></li>
					<li οnmοusemοve="mousemove(this)" οnmοuseοut="mouseout(this)"></li>
					<li οnmοusemοve="mousemove(this)" οnmοuseοut="mouseout(this)"></li>
					<li οnmοusemοve="mousemove(this)" οnmοuseοut="mouseout(this)"></li>
				</ul>
			</div>
		</div>
		</div>
	</body>
	<script>
		var i=1;
		var list=document.getElementsByTagName("li");
		//轮播函数
		function xiaopin(){
			if(i>4){
				i=i%5;
			}
			for(var m=0;m<list.length;m++){
				if(list[m].style.backgroundColor=="green"){
					list[m].style.backgroundColor="black";
				}
				list[i].style.backgroundColor="green";
			}
			document.getElementById("img").src="imgs/"+i+".png";
			i++;
		}
		//设置并开启一个定时器
		var a=setInterval(xiaopin, 2000);
		//鼠标摸进去事件
		function mousemove(obj){
			for(var m=0;m<list.length;m++){
				if(list[m].style.backgroundColor=="green"){
					list[m].style.backgroundColor="black";
					document.getElementById("img").src="imgs/"+m+".png";
					i=m+1;
				}
			}
			obj.style.backgroundColor="green";
			clearInterval(a);
		}
		//鼠标摸出来时间
		function mouseout(obj){
			setTimeout(function(){

			}, 2000);
			a=setInterval(xiaopin, 2000);
		}





	</script>
</html>

效果如图：