使用JavaScript实现轮播图效果完整实例
更新时间：2024年01月16日 09:11:55 作者：几何小超
我们在各种网页中经常见到轮播图的效果,下面这篇文章主要给大家介绍了关于使用JavaScript实现轮播图效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
最好今天分享一个使用JS制作的轮播图效果
首先是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"><</button>
<button class="next">></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:i
toggle()
})
function toggle(){
//公共部分
// 1.3得到对应的对象
img.src=sliderData[i].url
p.innerHTML=sliderData[i].title
footer.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"><</button>
<button class="next">></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:i
toggle()
})
function toggle(){
// 1.3得到对应的对象
img.src=sliderData[i].url
p.innerHTML=sliderData[i].title
footer.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>总结
到此这篇关于使用JavaScript实现轮播图效果的文章就介绍到这了,更多相关JS实现轮播图效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
将字符串转换成gb2312或者utf-8编码的参数(js版)
直接在url中传递中文参数时，读到的中文都是乱码，那么我们应该怎么将这些参数转换呢，接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧2013-04-04
Proxy用于修改某些操作的默认行为，在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这一层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。本文就讲讲Proxy的使用2021-05-05
这篇文章主要介绍了JavaScript Date 知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了js中定义一个变量 var params=null;判断params 为/不为空的方法 ,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了javascript中AJAX用法,实例分析了针对不同浏览器的Ajax使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS判断字符串字节数并截取长度的方法,涉及JavaScript针对页面元素与字符串的动态操作技巧,需要的朋友可以参考下2016-03-03
众所周知前端三大缓存,cookie,sessionStorage,localStorage,下面这篇文章主要给大家介绍了关于localStorage设置有效期和过期时间的相关资料,需要的朋友可以参考下2022-02-02
在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：2013-03-03
本篇文章主要介绍了js实现canvas图片与img图片的相互转换的示例，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
下面小编就为大家带来一篇JS 清除字符串数组中,重复元素的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论