原生JS和CSS实现滚动轮播图的实现思路(附带指示器)

01大杂烩

已于 2022-09-16 17:13:00 修改

阅读量1k

点赞数 2

分类专栏： web前端干货文章标签： css javascript css3 前端 html

于 2022-09-16 17:01:44 首次发布

本文链接：https://blog.csdn.net/qq_37580940/article/details/126888029

版权

我们要实现的效果图如下：(图片截取自英雄联盟官网https://lol.qq.com/main.shtml)
在这里插入图片描述

（想要直接copy代码的同学，直接跳到最后的☆☆☆最终代码标识处）

我们来说说实现思路:
这个效果的背后逻辑就是一个盒子里，装着一个比它还要大的盒子，只是溢出部分用overflow:hidden隐藏掉了，只是我们看不到，但一直都在。外盒子宽度设置500px,内盒子的宽度要设置外盒子宽度的倍数即500的倍数(宽度自定，如下效果图中宽度是500px*5)
如下图
在这里插入图片描述
要做到溢出部分隐藏且不占空间，我们采用绝对定位实现
外盒子设置position:relative;overflow:hidden;
内盒子设置position:absolute;left:0px;top:0px;

第二步:如何滚动起来：定时器setInterval
利用setInterval让内盒子每过几秒就向左移动500px;(这里的向左移动是一个过程，所以我们需要在外盒子上加上属性transition: 0.5s;意思就是元素从一个状态变化到另一个状态所需要的时间，在这里就是向左移动500px需要0.5s)
转化为代码就是向左移动就是left = left - 500;
代码实现就是:定义一个全局遍历记录left = 0,定一个全局变量记录每次需要移动的距离width = 500,让内盒子每2秒向左移动一次，移动到-2000的位置时回到最初的位置

<script>
let width = 500;
let inditor = 0;//这里我们采用指示器的方法，有利于扩展,初始值为0也就是第一个轮播图的下标
let bannerList = document.getElementById("banner-list"); //内盒子的dom对象
window.onload=function(){
     
	  var interval = setInterval(function(){
     
	  	if(inditor >= 4){
     
	  		//如果下标到达了最后一个，令inditor = -1;因为定时器每次都会最后加1，所以这里等于-1后+1刚才等于0，跳到了第一个		
	  		inditor = -1;
		 }
		 //指示器代表轮播图的下标，每次+1，到最后回到0
		 inditor++;
		 //操作内盒子的dom对象，使得内盒子向左移动	
		 bannerList.style.left = -(width*inditor) + "px";
	 },2000);
</script>

在这里插入图片描述
（这里看起来有点卡顿是因为gif图的原因，实际上滚动的非常丝滑）

第三步：鼠标上浮到对应的指示位置，轮播图会作出对应的移动
到这里我们就需要采用到JS了，从效果图来分析
需求1.鼠标移动到第i个指示器时，内盒子马上要移动到对应的那张图，且鼠标没有移出时要一直停留在那张图上
需求2.鼠标移出时轮播图继续按照原来的规律开始滚动
需求3.轮播图滚动到第i张图片时，第i个指示器高亮显示

代码实现->需求1，2：

<script>
		//指示器下标
		let inditor = 0;
		//移动距离
		let width = 500;
		//内盒子dom对象
		let bannerList = document.getElementById("banner-list");
		//指示器dom对象
		let indicatorList = document.getElementById("indicator-list");
		//定时器设置为全局变量，因为鼠标上浮时需要清空定时器，默认值为null
		let interval = null;
		//也将定时器中的方法抽出来存为全局变量，方便后续拓展
		let intervalFun = function(){
     
				if(inditor == 4){
     
					inditor = -1;
				}
				inditor++;
				bannerList.style.left = -(width*inditor) +"px";
				
		};
		//页面初始化时
		window.onload=function(){
     
		 //为指示器添加监听事件
4		 addListener();
		//开始滚动
		 interval = setInterval(intervalFun,2000);
		
	//鼠标移入指示器时，index为鼠标移入时该指示器的下标