前端JavaScript——原生JavaScript轮播图实现（更多信息请看JQuery版本了解）

最新推荐文章于 2021-09-23 21:43:37 发布

tingyu_

最新推荐文章于 2021-09-23 21:43:37 发布

阅读量158

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/tingyu_/article/details/107371880

版权

web前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播菜单</title>
	<style>
/*改变标签的默认样式*/
	*{padding: 0px;margin: 0px;list-style: none;}
/*轮播图块的大小样式（定位和overflow看不明白的可以参考JQuery版本的轮播图）*/
	div{margin: 50px auto;
		width: 490px;height: 170px;overflow: hidden;position: relative;}
/*设置小圆点的位置*/	#list{position: absolute;bottom: 10px;right: 10px;}
/*设置小圆点的样式*/
	ol li{float: left;
		background: #FFFF00;
		color:red;
		font-weight: bolder;
		width: 20px;height: 20px;
		font-size: 15px;
		margin-right: 2px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
	}
	ul li{width: 490px;height: 170px;}
/*小圆点选中时的样式*/
	#list .on{background: blue;color:red;}	</style>
</head>
<body>
	<div>
		<ul id="pic">
			<li><img src="images/01.jpg" alt=""></li>
			<li><img src="images/02.jpg" alt=""></li>
			<li><img src="images/03.jpg" alt=""></li>
			<li><img src="images/04.jpg" alt=""></li>
			<li><img src="images/05.jpg" alt=""></li>
		</ul>
		<ol id="list" type="">
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
	<script>
/*首先获取元素的节点*/
		var pic=document.getElementById("pic")
		var list=document.getElementById("list").getElementsByTagName("li")
/*定义变量*/
		var index=0
		var time=null

		function auto(){
			time=setInterval(function(){
				index++;
				if(index>=list.length){
					index=0;
				}
				change(index);
			},2000)
		}
		auto();
		function change(curIndex){
			pic.style.marginTop=-170*curIndex+"px";
			for(var i=0;i<list.length;i++){
				list[i].className=""
			}
			list[curIndex].className="on"
			index=curIndex;
		}

		auto();
		pic.onmouseover=function(){
			clearInterval(time);
		}
/*在这里鼠标移出的时候可以直接 调用auto的原因是，这里的auto，包含了重启定时器，而JQuery版本的并不包含*/
		pic.onmouseout=auto;

		for(var i=0;i<list.length;i++){
			list[i].id=i;
			list[i].onmouseover=function(){
				change(this.id);
				this.id.style.cursor="pointer";
			}
		}
	</script>
</body>
</html>