当前位置：首页 > news >正文

使用JS来实现轮播图的效果

news 2025/6/28 21:49:39

最好今天分享一个使用JS制作的轮播图效果

个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好前端

首先是HTML部分

<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div>

下一步是css部分

 * {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}

之后就是来介绍一下JS实现轮播图的效果

我们都知道轮播图点一下右边的箭头或者是左边的箭头就可以滚动页面

所以我们第一步先做右边的箭头

还是先声明一个数组，里面放了图片，和文字和背景颜色

第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0

因为我们的i需要进行i++或者是i--的操作，所以在上面等单独定义一个i=0，记住这里不能用const，只能用let

然后注册点击事件： next.addEventListener('click', function()，

但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个

// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]//获取元素const img=document.querySelector('.slider-wrapper img')const p=document.querySelector('.slider-footer p')const footer=document.querySelector('.slider-footer')// 1右侧按钮业务// 1.1获取右侧按钮const next=document.querySelector('.next')let i=0// 1.2注册点击事件next.addEventListener('click', function(){i++// 1.6判断if(i>=8){i=0}toggle()})

2.右侧的点击事件和左侧一样，就是需要换一下判断依据，还要获取的元素。前几章我已经说过如何来得到对应的对象，比如图片，文字和背景颜色还有更新的小圆点

// 2.左侧按钮const prev=document.querySelector('.prev')prev.addEventListener('click', function(){i--// 1.6判断i=i<0?sliderData.length-1:itoggle()})function toggle(){
//公共部分// 1.3得到对应的对象img.src=sliderData[i].urlp.innerHTML=sliderData[i].titlefooter.style.backgroundColor=sliderData[i].color// 1.5更换小圆点document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}

3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件

然后我们加了这样一个功能，比如鼠标经过盒子停止定时器，或者是离开又开始定时器的操作

通称都用了这两个事件

第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了

slider.addEventListener('mouseenter', function(){

slider.addEventListener('mouseleave', function()

// 3.自动播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠标经过大盒子，停止定时器const slider=document.querySelector('.slider')//注册事件slider.addEventListener('mouseenter', function(){//停止定时器clearInterval(timerId)})// / 4.鼠标经过大盒子，开启定时器//注册事件slider.addEventListener('mouseleave', function(){//停止定时器clearInterval(timerId)timerId = setInterval(function(){next.click()},1000)})

这是源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]//获取元素const img=document.querySelector('.slider-wrapper img')const p=document.querySelector('.slider-footer p')const footer=document.querySelector('.slider-footer')// 1右侧按钮业务// 1.1获取右侧按钮const next=document.querySelector('.next')let i=0// 1.2注册点击事件next.addEventListener('click', function(){i++// 1.6判断if(i>=8){i=0}toggle()})// 2.左侧按钮const prev=document.querySelector('.prev')prev.addEventListener('click', function(){i--// 1.6判断i=i<0?sliderData.length-1:itoggle()})function toggle(){// 1.3得到对应的对象img.src=sliderData[i].urlp.innerHTML=sliderData[i].titlefooter.style.backgroundColor=sliderData[i].color// 1.5更换小圆点document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 3.自动播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠标经过大盒子，停止定时器const slider=document.querySelector('.slider')//注册事件slider.addEventListener('mouseenter', function(){//停止定时器clearInterval(timerId)})// / 4.鼠标经过大盒子，开启定时器//注册事件slider.addEventListener('mouseleave', function(){//停止定时器clearInterval(timerId)timerId = setInterval(function(){next.click()},1000)})</script>
</body></html>