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

我们要实现的效果图如下:(图片截取自英雄联盟官网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为鼠标移入时该指示器的下标
	
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值