js轮播图小案例（面向过程）

最新推荐文章于 2023-08-07 16:12:45 发布

猿来乐

最新推荐文章于 2023-08-07 16:12:45 发布

阅读量119

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44998052/article/details/114232302

版权

做项目需要轮播图模块就学习了下如何写js原生轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				font-size: 0.75rem;
			}
			ul{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.box{
				width: 1000px;
				height: 460px;
				position: relative;
				border: 1px red solid;
			}
			.ul1{
				width: 100%;
				height: 100%;
				
			}
			.ul1>li{
				position: absolute;
				top: 0;
				left: 0;
			}
			.left-botton{
				width: 35px;
				height: 70px;
				background-color: black;
				color: aliceblue;
				text-align: center;
				line-height: 70px;
				position: absolute;
				font-size: 27px;
				top: 195px;
				left: 0;
				border-radius: 5px 0 0 5px;
			}
			.right-botton{
				width: 35px;
				height: 70px;
				background-color: black;
				color: aliceblue;
				text-align: center;
				line-height: 70px;
				position: absolute;
				font-size: 27px;
				top: 195px;
				right: 0;
				border-radius:  0 5px 5px 0 ;
			}
			.ul2{
				position: absolute;
				bottom: 20px;
				right: 100px;
			}
			.ul2>li{
				width: 20px;
				height: 20px;
				background-color: white;
				text-align: center;
				line-height: 20px;
				float: left;
				border-radius: 100%;
				margin-right: 10px;
			}
			.ul2>li:hover{
				background-color: red;
				color: #F0F8FF;
			}
			.ul2>li:nth-child(1){
				background-color: red;
				color: #F0F8FF;
			}
			.ul1>li:nth-child(1){
				z-index: 100;
			}
			.indexs{
				z-index: 1000;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="ul1" id="ul1">
				<li><img src="./img/图1.jpg" width="1000" height="460"></li>
				<li><img src="./img/图2.jpg" width="1000" height="460"></li>
				<li><img src="./img/图3.jpg" width="1000" height="460"></li>
				<li><img src="./img/图4.png" width="1000" height="460"></li>
			</ul>
			<div class="left-botton indexs" id="left-botton">&lt;</div>
			<div class="right-botton indexs" id="right-botton">&gt;</div>
			<ul class="ul2 indexs" id="ul2">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var imgs =document.getElementById("ul1").children;
		var botton =document.getElementById("ul2").children;
		var leftbotton=document.getElementById("left-botton");
		var rightbotton=document.getElementById("right-botton");
		
		var index=0;
		var dingshiqi;
		chongqi();
		function chongqi(){
			dingshiqi=setInterval(function(){
				index++;
				if(index==imgs.length){
					index=0;
				}
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.cssText="z-index:0;"
					botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
				}
				imgs[index].style.cssText="z-index: 100;";
				botton[index].style.cssText="background-color:red;color: #F0F8FF;"
			},2000)
		}
		leftbotton.onclick=function(){
			// 关闭定时器
			clearInterval(dingshiqi);
			index--;
			if(index<0){
				index=imgs.length-1;
			}
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[index].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		rightbotton.onclick=function(){
			// 关闭定时器
			clearInterval(dingshiqi);
			index++;
			if(index>imgs.length-1){
				index=0;
			}
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[index].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		
		botton[0].onclick=function(){
			clearInterval(dingshiqi);
			index=0;
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[0].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		botton[1].onclick=function(){
			clearInterval(dingshiqi);
			index=1;
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[1].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		botton[2].onclick=function(){
			clearInterval(dingshiqi);
			index=2;
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[2].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		botton[3].onclick=function(){
			clearInterval(dingshiqi);
			index=3;
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.cssText="z-index:0;"
				botton[i].style.cssText="background-color:#F0F8FF;color: #000000;"
			}
			imgs[index].style.cssText="z-index: 100;";
			botton[3].style.cssText="background-color:red;color: #F0F8FF;"
			chongqi();
		}
		console.log(imgs);
	</script>
</html>

实现效果：
在这里插入图片描述
代码比较冗余，用来理解实现原理不错，还是菜鸟一枚，以后有空优化一下代码。

猿来乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js轮播图小案例（面向过程）

做项目需要轮播图模块就学习了下如何写js原生轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ font-size: 0.75rem; } ul{ margin: 0px; padding: 0px; list-st
复制链接

扫一扫

js轮播图小案例（面向过程）

“相关推荐”对你有帮助么？