Js实现轮播图01

实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：
实现效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图实现01</title>
		<style type="text/css">
			.lunbo{
				width: 900px;
				height: 400px;
				margin:100px auto;
			}
			.lunbo img{
				width: 100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<!--轮播图模块 -->
		<div class="lunbo">
			<img id="lunbo_img" src="./pic/img3.jpeg" >
		</div>
		<!-- Js代码 -->
    <script>
      var index = 1;
        function lunbo(){
            index ++ ;
            //判断index是否大于3
            if(index > 3){
                index = 1;
            }
            //获取img对象
            var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2.定义定时器
        setInterval(lunbo,2000);
        /*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。
	</script>
	</body>
</html>

Js实现轮播图02

实现思路
这可能是轮播图最简单点的实现之一，通过改变background的图片链接来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变background属性里面的url（）图片链接的名字来实现切换效果。代码如下：
实现效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图实现02</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.lunbo{
				width:100%;
				height:720px;
				background-image: url(pic/img1.jpeg);/*背景图片*/
				background-size:100% 100%; 
			}
		</style>
	</head>
	<body>
		<div class="lunbo">
			
		</div>
		<script type="text/javascript">
		  var index = 1;
			function lunbo(){
				index ++ ;
				//判断number是否大于3
				if(index > 3){
					index = 1;
				}
				//获取img对象
		var img = document.getElementsByClassName("lunbo")[0];
		img.style.background = "url(pic/img"+index+".jpeg)";
		img.style.backgroundSize="100% 100%";	
			}
			//2.定义定时器
			setInterval(lunbo,3000);
		</script>
	</body>
</html>

Js实现轮播图03

本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签，再通过index++来实现切换循环显示的效果，当点击两边的按钮时，调用index++所在的方法实现切换的效果，没有复杂的算法，一点点基础一看代码就会学会，请大家参考。
实现效果
在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
		minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--引入CSS代码-->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<!--引入Js代码-->
		<script src="./js/index.js"></script>
		<title>Js实现轮播图</title>
	</head>
	<body>
		<div class="lunbo">
			<div class="content">
			<ul id="item">
				<li class="item">
					<a href="#"><img src="img/pic1.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic2.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic3.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic4.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic5.jpg" ></a>
				</li>
			</ul>
			<div id="btn-left"><</div>
			<div id="btn-right">></div>
			<ul id="circle">
				
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
			</ul>
			</div>
		</div>
	</body>
</html>

CSS代码

*{
	margin: 0;
	padding: 0;
}
a{
	list-style: none;
}
li{
	list-style: none;
}
.lunbo{
	width: 100%;
}
.content{
	width: 800px;
	height: 300px;
	margin: 20px auto;
	position: relative;
}
#item{
	width: 100%;
	height: 100%;
	
}
.item{
	position: absolute;
	opacity: 0;
	transition: all 1s;
	
}
.item.active{
	opacity:1;
}
img{
	width: 100%;
}
#btn-left{
	width: 30px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left:5px;
	z-index: 10;/*始终显示在图片的上层*/
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
	cursor: pointer;
	opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
	/*鼠标滑入，显示图标*/
	opacity: 1;
}

#btn-right{
	width: 26px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left: 5px;
	z-index: 10;
	position: absolute;
	right: 0;
	top: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-60%);
}
.lunbo:hover #btn-right{
	opacity: 1;
}
#circle{
	height: 20px;
	display: flex;
	position: absolute;
	bottom: 35px;
	right: 25px;
}
.circle{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	border: 2px solid white;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
	margin: 5px;
}
.white{
	background-color: #FFFFFF;
}

JS代码

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;

//清除class
var clearclass=function(){
	for(let i=0;i<items.length;i++){
		items[i].className="item";
		circles[i].className="circle";
		circles[i].setAttribute("num",i);
	}
}
/*只显示一个class*/
function move(){
	clearclass();
	items[index].className="item active";
	circles[index].className="circle white";
}
  //点击右边按钮切换下一张图片
  rightBtn.onclick = function () {
    index = (index + 1) % items.length;
    //对 items.length 取余 % items.length，确保当索引超过 items.length - 1 后回到 0。
    //例如，当 index 为 items.length - 1 时，index + 1 会变成 items.length，取余后的结果为 0，即第一个元素的索引。
    // if (index < items.length - 1) {
    //   index++;
    // } else {
    //   index = 0;
    // }
    move();
  };
  //点击左边按钮切换上一张图片
  leftBtn.onclick = function () {
    index = (index - 1 + items.length) % items.length;
    //为了防止 index - 1 变成负数，增加了 items.length。例如，当 index 为 0 时，index - 1 会变成 -1，
    //而 -1 + items.length 则会成为 items.length - 1，即最后一个元素的索引。
    // if (index == 0) {
    //   index = items.length - 1;
    // } else {
    //   if (index < items.length) {
    //     index--;
    //   }
    // }
    move();
  };
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
	rightBtn.onclick();
},1500)
//点击圆点时，跳转到对应图片
for(var i=0;i<circles.length;i++){
	circles[i].addEventListener("click",function(){
		var point_index=this.getAttribute("num");
		index=point_index;
		move();
	})

}
//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
content.onmouseover=function(){
	clearInterval(timer);
		timer=setInterval(function(){
			rightBtn.onclick();
		},3000)
}
//鼠标移出又开启定时器
content.onmouseleave=function(){
	clearInterval(timer);
	timer=setInterval(function(){
		rightBtn.onclick();
	},1500)
}
//初始化轮播图，使页面加载完成后立即显示第一张图片和对应的圆点状态
move()
}

代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。

# javascript # css # html
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高校行走进哈尔滨，与两校学子共话数据库人才发展

avatar 华为开发者空间
cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间