小白的你，还不会写轮播图？

最新推荐文章于 2024-04-28 07:23:52 发布

空白如我

最新推荐文章于 2024-04-28 07:23:52 发布

阅读量508

点赞数 2

分类专栏： JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/qq_42890921/article/details/103672268

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

PS：个人学习小结，有什么不对的地方欢迎大家指正
说到轮播图，我们得先知道轮播图的实现原理，见名知其意，所谓轮播图就是轮流播放的一些图片，我小结了三个我个人认为比较简单，容易理解的轮播图实现方式。

1：让图片隐藏实现轮播图方式
实现思路：将所有图片(重叠在一起)display：none隐藏，只让第一张显示，当切换到哪一个图片的时候，就将哪一张图片样式改为display：block显示出来，图片下面的小点也要跟图片同步，实现方式跟图片一样，听起来是不是很简单的样子！让我们来一起试试看

先来写页面的基本样式（按钮随便放的div，懒得调）
css部分：

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul,li{
				list-style: none;
			}
			#banner{
				width: 750px;
				height: 360px;
				margin: 0px auto;
				position: relative;
			}
			#banner-img{
				width: 750px;
				height: 360px;
				position: relative;
			}
			#banner-img li{
				position: absolute;
				left: 0px;
				top: 0px;
				display: none;
			}
			#banner-img li.now{
				display:block
			}
			#left,#right{
				width: 40px;
				height: 80px;
				background: red;
				position: absolute;
				top: 50%;
				margin-top: -40px;
				cursor: pointer;
			}
			#right{
				right: 0px;
			}
			#dots{
				width: 300px;
				height: 20px;
				/*background: #CCCCCC;*/
				position: absolute;
				left:50%;
				margin-left: -150px;
				bottom: 10px;
				text-align: center;
			}
			#dots li{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #333;
				display: inline-block;
				cursor: pointer;
			}
			#dots li.active{
				background: yellow;
			}
		</style>

页面布局部分

<div id="banner">
			<ul id="banner-img">
				<li class="now"><img src="images/pic1.jpg"/></li>
				<li><img src="images/pic2.jpg"/></li>
				<li><img src="images/pic3.jpg"/></li>
				<li><img src="images/pic4.jpg"/></li>
				<li><img src="images/pic5.jpg"/></li>
			</ul>
			<div id="left"></div>
			<div id="right"></div>
			<ul id="dots">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

接下来就是重点的js部分了
先获取各个元素，这个就不用说了
然后我还定义了一个定时器（自动点击实现切换）和一个自定义索引

//获取元素
			var oBanner=document.getElementById("banner");
			var oBannerImg=document.getElementById("banner-img");
			var oLis=oBannerImg.getElementsByTagName("li");
			var oLeft=document.getElementById("left");
			var oRight=document.getElementById("right");
			var oDots=document.getElementById("dots");
			var oDotsLis=oDots.getElementsByTagName("li");
			var timer=null;  //定义一个定时器变量
			var num=0; //自定义索引

先给右边的按钮添加点击事件
ps：changeImg（）是后面要写的自动点击切换图片的函数
点击右边按钮的时候图片索引是渐增的，所以是num++，同理左边按钮就是num- -，如果索引大于放图片的li长度，就让索引值等于0，左边按钮同理

oRight.onclick=function(){
		num++;
		if(num>oLis.length-1){
			num=0
		}
		changeImg()
	}
//左边按钮
oLeft.onclick=function(){
		num--;
		if(num<0){
			num=oLis.length-1
		}
		changeImg()
	}

切换图片函数，我把注释都加上了

//切换图片的函数
	function changeImg(){
		//遍历所有li
		for(var i=0;i<oLis.length;i++){
			//先把所有的li类名清空
			oLis[i].className="";
			//把所有小点的类名清空
			oDotsLis[i].className="";
		}
		//将当前索引图片类名改为now(显示)
		oLis[num].className="now";
		//当前索引的小点类名改为active
		oDotsLis[num].className="active"
	}

图片下面的小点点击的时候也应该要能切换图片，跟上面的切换图片实现原理一样（切换小点的时候图片也得跟着换），先将所有类名清空，轮到哪个点就将提前写好的样式的类名加给哪个点

//点击指示点
	for(var j=0;j<oDotsLis.length;j++){
	    //for循环一下就循环完毕，所以我们需要定义一个自定义索引来储存一下
		oDotsLis[j].index=j
		//给小点添加点击事件
		oDotsLis[j].onclick=function(){
			for(var i=0;i<oLis.length;i++){
				oLis[i].className="";
				oDotsLis[i].className="";
			}
			oLis[this.index].className="now";
			this.className="active";
			num=this.index;
		}
	}

这样就算已经大功告成了，接下来只要写一个定时器函数，让它每隔几秒点击一下右边的按钮，轮播图效果就完成了

//给定时器添加一个每隔两秒点击一次右按钮的函数
timer=setInterval(function(){
		oRight.onclick()
	},2000)
	//当鼠标停留在图片区域的时候清除定时器（停止轮播图）
	oBanner.onmouseover=function(){
		clearInterval(timer)
	}
	//鼠标离开时开启定时器
	oBanner.onmouseout=function(){
		timer=setInterval(function(){
		oRight.onclick()
	},2000)
	}

来看看最后的效果图
在这里插入图片描述

2：利用数组
实现思路：把轮播图所需要的图片封装在一个数组里，通过遍历实现图片的循环播放，是不是听起来比上一个还简单，来，我们来试试
由于每次写的时候想法不同，所以布局什么的也不同，勿怪（主要是懒得改的，哈哈哈）
css和html布局部分

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#banner{
			width: 790px;
			height: 340px;
			margin: 50px auto;
			position: relative;
		}
		#banner img{
			width: 100%;
		}
		#left,#right{
			width: 40px;
			height: 80px;
			background: #f00;
			position: absolute;
			top: 50%;
			margin-top: -40px;
		}
		#right{
			right: 0;
		}
		#dots{
			width: 100%;
			height: 16px;
			position: absolute;
			bottom: 10px;
			text-align: center;
			/*background-color: #ccc;*/
		}
		#dots li{
			width: 16px;
			height: 16px;
			background-color: #f00;
			border-radius: 50%;
			display: inline-block;
			/*margin-left: 5px;*/
		}
		#dots .active{
			background-color: yellow;
		}
	</style>
	<body>
		<div id="banner">
		<img src="banner-1.jpg" id="img">
		<div id="left"></div>
		<div id="right"></div>
		<ul id="dots"></ul>
		</div>
	</body>

js部分，注释加上了，这个我没有加鼠标移入停止轮播图的事件

// 定义数据
var arrBanner=["banner-1.jpg","banner-2.jpg","banner-3.jpg","banner-4.jpg"];
//遍历数组，动态添加li
for(var i=0;i<arrBanner.length;i++){
	oDots.innerHTML+="<li></li>";
}
//自定义索引
var num=0;
oLis[num].className='active';
//自动播放函数
function autoPlay(){
 //这的意思是我们只要改变索引就可以实现切换图片
	oImg.src=arrBanner[num];
	for (var i = 0; i < arrBanner.length; i++) {
		oLis[i].className=""
	}
	oLis[num].className="active"
}
// 添加右点击事件
oRightBtn.onclick=function(){
	num++
	if (num>arrBanner.length-1) {
		num=0;
	}
	autoPlay()
}
// 添加左点击事件
oLeftBtn.onclick=function(){
	num--
	if (num<0) {
		num=arrBanner.length-1;
	}
	autoPlay()
}
// 添加小圆点的点击事件
for(var i=0;i<oLis.length;i++){
	oLis[i].index=i;
	oLis[i].onclick=function(){
		oImg.src=arrBanner[this.index];
		for (var i = 0; i <arrBanner.length; i++) {
			oLis[i].className=""
		}
		oLis[this.index].className="active"
		num=this.index;
	}
}
 //定时器自动点击右按钮
setInterval(function(){
	oRightBtn.onclick()
},2000)

最后的效果图如下

在这里插入图片描述

3：无缝播放

实现思路：
1.计算图片列表ul的宽度
2.开启定时器，使其向左边距不断增大，造成向左运动的效果
3.图片列表复制一份，向左移动时，当左边距大于一份的宽度时，把它的左边距拉回到0。向右移动时，当左边距大于0时，把它的左边距拉到整个两份图片列表一半的宽度（即一份的宽度）。（拉的瞬间很快，用户察觉不到，造成一种无缝滚动的假象）

var oBox=document.getElementById("box");
			var oUl=oBox.getElementsByTagName("ul")[0];
			var oLis=oUl.getElementsByTagName("li");
			oUl.innerHTML+=oUl.innerHTML
			//offsetWidth 水平方向 width + 左右padding + 左右border-width
			//ul的宽度根据内容自动调整
			oUl.style.width=oLis[0].offsetWidth*oLis.length+"px"
			//定义一个定时器变量
			var timer=null;
			//设置移动速度为5
			var speed=5
			function moveFn(){
				//offsetLeft值的正负决定往哪边移动
				if(oUl.offsetLeft<-oUl.offsetWidth/2){
					oUl.style.left=0
				}
				oUl.style.left=oUl.offsetLeft-speed+"px"
			}
			timer=setInterval(moveFn,30)
			//鼠标移入时清除定时器
			oBox.onmouseover=function(){
				clearInterval(timer)
			}
			//鼠标移出开启定时器
			oBox.onmouseout=function(){
				timer=setInterval(moveFn,30)
			}

完成，很简单吧
最后的效果图如下：
在这里插入图片描述
PS：仅作为个人学习小结分享，如发现有不对的地方，欢迎大家帮忙指正

空白如我

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
小白的你，还不会写轮播图？

PS：个人学习小结，有什么不对的地方欢迎大家指正说到轮播图，我们得先知道轮播图的实现原理，见名知其意，所谓轮播图就是轮流播放的一些图片，我小结了三个我个人认为比较简单，容易理解的轮播图实现方式。1：让图片隐藏实现轮播图方式实现思路：将所有图片(重叠在一起)display：none隐藏，只让第一张显示，当切换到哪一个图片的时候，就将哪一张图片样式改为display：block显示出来，图片下...
复制链接

扫一扫

专栏目录