Web前端轮播图_web前端轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_74394367/article/details/133890307

Web前端轮播图

一、实验题目: 轮播图

二、实验内容简介

1．整体布局：图片、左右按钮、数字列表、添加删除按钮

2、左右箭头滚动

3、小圆点滚动

4、自动轮播

5、鼠标动作：指向和离开

6、添加与删除

三、实验过程

1.需求分析

（1）左侧部分：设有添加和删除两个按钮以及输入文本框在左上角，在分别单击添加和删除按钮时，会相对应的添加和删除图片以及数字列表，同时文本框中的数字也会随之增加或减少，最多可以添加到第9张图片，最少可以删除到剩2张图片。设置了一个清新的背景色。

（2）中间部分：主体为图片，在图片左上角标有与图片相对应的数字序号且带有颜色。在图片左侧中间设有向左箭头的按钮在单击时会以7、6、5、4、3、2、1、7的顺序对应切换。在图片右侧中间部分设有向右的箭头按钮在单击时会以1、2、3、4、5、6、7、1的顺序对应切换。图片右下角设有1——7的圆圈序号与之对应，并且设置了背景色。

（3）右侧部分：设置了一个清新的背景色。

（4）在打开网页后，图片会自动循环播放，数字列表、小圆点会随之变换。

（5）鼠标指向图片时，变成手型，并且图片停止轮播。鼠标离开图片时，图片继续轮播。

（6）单击添加或删除按钮，文本框的数字会随之增加或减少，图片、小圆点、数字列表也会随之增加或减少，最多可以添加到第9张图片，最少可以删除到剩2张图片，图片依然可以进行自动轮播。

（7）单击图片中间两侧的左右按钮或单击小圆点，图片可以进行变换，添加的小圆点不可以点击。

2.代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/changImg.css"/>
	</head>
	<body onload="init()">
		<div id="top">
			
		</div>
		<div id="nav">
			
		</div>
		<div id="img">
			<div id="imgLeft">
				
			</div>
			<div id="imgMiddle">
				<div id="changImg">
					<button type="button" id="addImg">添加</button>
					<button type="button" id="subImg">删除</button>
					<input type="text" name="imgNum" id="imgNum" value="5" style="width: 40px;"/>
				</div>
				<ul class="list">
					<li class="item">1</li>
					<li class="item">2</li>
					<li class="item imgShow">3</li>
					<li class="item">4</li>
					<li class="item imgShow">5</li>
				</ul>
				<button type="button" class="btn" id="goLeft"> << </button>
				<button type="button" class="btn" id="goRight"> >> </button>
				<ul class="ulNum">
					<li class="num">1</li>
					<li class="num">2</li>
					<li class="num">3</li>
					<li class="num">4</li>
					<li class="num numShow">5</li>
				</ul>
			</div>
			<div id="imgRight">
				
			</div>
		</div>
		<div id="content">
			
		</div>
		<div id="bottom">
			
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

index.css

/*轮播图设计
1.每个图片设置一个li标签，图片作为背景图
2.每个li标签的position的属性为absolute，使其显示在同一个位置
3.通过设置li标签的z-index属性，使该图片处于显示状态
*/
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
div{
	width: 100%;
	border: 1px solid gray;
}
#top{
	height: 100px;
}
#nav{
	height: 60px;
}
#img{
	height: 400px;
}
#content{
	height: 800px;
}
#bottom{
	height: 100px;
}
#imgLeft,#imgRight{
	width: 15%;
	float:left;
	height: 400px;
	background-color: bisque;
}
#imgMiddle{
	width: 70%;
	float: left;
	height: 400px;
	background-color: aqua;
	position: relative;
}
.item{
	list-style: none;
	color: red;
	font-size: 30px;
	border: 1px solid red;
	height: 400px;
	position: absolute;
	width: 100%;
	padding: 10px;
	cursor: pointer;/* 鼠标指向时手型 */
}
.item:nth-child(1){
	background: url(../img/1.jpg);
	background-size: 100% 400px;
}
.item:nth-child(2){
	background: url(../img/2.jpg);
	background-size: 100% 400px;
	/* z-index: 3; */
}
.item:nth-child(3){
	background: url(../img/3.jpg);
	background-size: 100% 400px;
}
.item:nth-child(4){
	background: url(../img/4.jpg);
	background-size: 100% 400px;
	
}
.item:nth-child(5){
	background: url(../img/5.jpg);
	background-size: 100% 400px;
}
.imgShow{
	z-index: 9;
}
.btn{
	position: absolute;
	z-index: 10;
	padding: 20px 15px;
}
#goLeft{
	top: 160px;
	left: 0px;
}
#goRight{
	top: 160px;
	right: 5px;
}
.ulNum{
	position: absolute;
	z-index: 10;
	right: 5px;
	bottom: 5px;
}
.num{
	list-style: none;
	border: 1px solid gray;
	padding: 20px 25px;
	float: left;
	background: #00FFFF;
	border-radius: 50%;
	margin-left: 5px;
}
.numShow{
	background-color: #FF0000;
}

changImg.css

#changImg{
	position: absolute;
	z-index: 30;
	left: -250px;
	width: 250px;
	border: 0px;
}

index.js

//获取图片
var imgs =document.getElementsByClassName("item");
// alert(imgs.length)
//获取小圆点按钮
var nums =document.getElementsByClassName("num")
//清除图片的激活状态
function clearActive(){
	imgs =document.getElementsByClassName("item");
	for(var i=0;i<imgs.length;i++){
		imgs[i].className="item"//清除图片的激活状态
		nums[i].className="num"//清除小圆点激活状态
	}
}
for(var i=imgs.length-1;i>=0;i--){
	//获取标签的class属性，
	classActive=imgs[i].getAttribute("class")
	console.log(classActive)
	//indexof在字符串中查找子串，返回出现的位置。没有找到则返回-1
	if(classActive.indexOf("imgShow")!=-1){
		index=i//当前正在显示的图片
		clearActive()
		imgs[i].className="item imgShow"
		nums[i].className="num numShow"
		break;
	}
}
//向左循环
var goLeft=document.getElementById("goLeft")
goLeft.onclick=function(){
	// alert(123)
	//清除所有图片的激活状态，把当前图片的前一张设置为激活
	clearActive();
	if(index==0){
		index=imgs.length-1
	}else{
		index--;
	}
	console.log(index)
	imgs[index].className="item imgShow"
	nums[index].className="num numShow"
}
//向右循环
var goRight = document.getElementById("goRight")
goRight.onclick=function(){
	
	clearActive()
	if(index == imgs.length-1){
		index = 0
	}else{
		index ++
	}
	console.log(index)
	imgs[index].className="item imgShow"
	nums[index].className="num numShow"
}
//小圆点事件：单击某一个小圆点，清除所有的active，把当前的小圆点对应
//图片设置为激活
for(var i=0;i<nums.length;i++){
	//记录当前操作的小圆点
	nums[i].no=i;
	//对所有小圆点绑定事件
	nums[i].onclick=function(){
		clearActive();
		//设置当前为激活样式
		nums[this.no].className="num numShow"
		imgs[this.no].className="item imgShow"
		//将当前激活的序号，同步给index
		index=this.no;		
	}
}
//自动轮播
function auto(){
	index++
	if(index==imgs.length){
		index=0
	}
	clearActive()
	imgs[index].className="item imgShow"
	nums[index].className="num numShow"
}
function init(){
	//设置的定时任务
	timer=setInterval(auto,2000)
}
//鼠标指向图片时，停止轮播
var imgMiddle = document.getElementById("imgMiddle")
imgMiddle.onmouseover=function(){
	//停止(设置定时任务)
	clearInterval(timer)
}
imgMiddle.onmouseout=function(){
	timer = setInterval(auto,2000)
}
//动态添加与删除
var addImg=document.getElementById("addImg")
var subImg=document.getElementById("subImg")
var imgParent=document.getElementsByClassName("list")[0]
var pointParent=document.getElementsByClassName("ulNum")[0]
var numss=document.getElementsByClassName("item").length
var imgNum=document.getElementById("imgNum")
//新增加的小圆点不可以点，因为新增加的节点不能继承原来的功能，需进行委托
addImg.onclick=function(){
	numss=document.getElementsByClassName("item").length
	console.log(numss)
	if(numss<9){
		clearInterval(timer)//清除定时器
		clearActive()//去掉激活
		//创建一个新的节点li
		var newli=document.createElement("li")
		newli.innerHTML=numss+1
		newli.style.background="url(img/"+(numss+1)+".jpg)"
		newli.style.backgroundSize="1500px 400px"
		newli.className="item imgShow"
		imgParent.appendChild(newli)//追加到结尾
		//创建一个新的圆点
		var newpoint=document.createElement("li")
		newpoint.innerHTML=numss+1
		newpoint.className="num numShow"
		var pointParent=document.getElementsByClassName("ulNum")[0]
		pointParent.appendChild(newpoint)
		//index为当前激活的图片，要同步
		index=numss
		imgNum.value=numss+1
	}
}
subImg.onclick=function(){
	numss=document.getElementsByClassName("item").length
	if(numss>2){
		clearInterval(timer)
		clearActive()
		//移除节点：当前父元素的最后一个子节点
		imgParent.removeChild(imgParent.lastChild)
		pointParent.removeChild(pointParent.lastChild)
		imgParent.lastChild.className="item imgShow"
		pointParent.lastChild.className="num numShow"
		index=numss-1
		imgNum.value=numss-1
		//删除节点后，计算下一张图片的索引，使其进行自动轮播
		if (index == 0) {
		    index = 1;
		} else {
		  index--;
		}
	}
}