本次轮播效果图如下:
具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换
以下为实现代码:
首先是html代码:
<div class="content">
<!-- 左焦点 -->
<div class="prev"></div>
<div class="header">
<div class="swiper">
<img class="images" src="./image/swiperitem/1.jpg" alt="">
<img src="./image/swiperitem/2.jpg" alt="">
<img src="./image/swiperitem/3.jpg" alt="">
<img src="./image/swiperitem/4.jpg" alt="">
<img src="./image/swiperitem/5.jpg" alt="">
<img src="./image/swiperitem/6.jpg" alt="">
<img src="./image/swiperitem/7.jpg" alt="">
<img src="./image/swiperitem/1.jpg" alt="">
</div>
</div>
<!-- 右焦点 -->
<div class="next"></div>
<ul class="lis">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
接下来是css样式:
<style>
* {
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 800px;
height: 800px;
margin: 0px auto;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.content .header {
position: relative;
margin: 50px auto;
overflow: hidden;
line-height: 0
}
/* 上一张按钮 */
.content .prev {
width: 20px;
height: 20px;
border: 1px solid #bebdbd;
margin-right: 5px;
border-radius: 100%;
position: relative;
top: 350px;
cursor: pointer;
}
.content .prev::before {
content: "";
position: absolute;
top: 6px;
right: 5px;
width: 5px;
height: 5px;
border-right: 2px solid rgb(56, 55, 55);
border-bottom: 2px solid rgb(56, 55, 55);
transform: rotate(135deg);
}
.swiper {
transition: all .3s;
}
.swiper img {
width: 700px;
float: left;
cursor: pointer;
}
/* 下一张按钮 */
.content .next {
width: 20px;
height: 20px;
border: 1px solid #bebdbd;
margin-right: 5px;
border-radius: 50%;
margin-left: 5px;
position: relative;
right: -771px;
top: -325px;
cursor: pointer;
}
.content .next::before {
content: "";
position: absolute;
top: 6px;
right: 8px;
width: 5px;
height: 5px;
border-right: 2px solid rgb(56, 55, 55);
border-bottom: 2px solid rgb(56, 55, 55);
transform: rotate(-45deg);
}
.lis {
width: 200px;
height: 20px;
margin: -40px auto;
display: flex;
justify-content: space-between;
}
.lis>li {
width: 15px;
height: 15px;
border-radius: 100%;
margin: 5px;
background-color: aqua;
cursor: pointer;
}
</style>
第三部分是最主要的js代码:
<script>
const list = ["./image/swiperitem/1.jpg", "./image/swiperitem/2.jpg", "./image/swiperitem/3.jpg", "./image/swiperitem/4.jpg", "./image/swiperitem/5.jpg", "./image/swiperitem/6.jpg", "./image/swiperitem/7.jpg"]
// 获取元素
let imgs = document.querySelector('.images')
let swiper = document.querySelector('.swiper')
let header = document.querySelector('.header')
let lis = document.querySelector('.lis').querySelectorAll('li')
let p = document.querySelector('p')
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')
// 保存img宽度
let imgWidth = imgs.width
// 动态给swiper设置宽度
swiper.style.width = list.length * imgs.width + imgs.width + 'px'
// 动态给herder、设置高度
header.style.width = imgs.width + 'px'
// 设置默认初始值
let obj = {
that: 0,
// 控制是否关闭定时器
buttonClick: true,
btnClick: true
}
// 定时器
let timeout = undefined
// 排他思想
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 向左滑动
prev.addEventListener('click', function () {
// 关闭定时器
clearTimeout(timeout)
obj.buttonClick = false
obj.btnClick = false
// 每次加一
obj.that = obj.that + imgWidth
// 判断是否滚动到了最后
if (obj.that >= list.length * imgWidth) {
obj.that = 0
}
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 设置移动的距离
swiper.style.transform = `translateX(-${obj.that}px)`
})
// 向右滑动
next.addEventListener('click', function () {
// // 关闭定时器
clearTimeout(timeout)
obj.buttonClick = false
obj.btnClick = false
obj.that = obj.that - imgWidth
// 如果滑动到了第一张,则跳转到最后一张
if (obj.that < 0) {
obj.that = (list.length - 1) * imgWidth
}
// 排他思想,去除所有的li样式,再重新给一个li设置样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
swiper.style.transform = `translateX(-${obj.that}px)`
})
// 点击ul切换图片
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 关闭定时器
clearTimeout(timeout)
// obj.buttonClick = false
// obj.btnClick = false
obj.that = imgWidth * i
swiper.style.transform = `translateX(-${obj.that}px)`
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
})
}
// 发生点击事件则停止一段时间定时器,过几秒重新开启定时器
Object.defineProperty(obj, "buttonClick", {
// 设置obj为代理
configurable: true,
set() {
// 刚开始关闭定时器
clearInterval(time)
// 间隔1秒重新开启定时器
timeout = setTimeout(() => {
// console.log('即将开启定时器');
time = setInterval(fun, 1500)
obj.btnClick = true
}, 1000)
},
})
// 开启定时器
let time = setInterval(fun, 1500)
function fun() {
if (obj.that >= list.length * imgWidth) {
obj.that = 0
}
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 设置移动的距离
swiper.style.transform = `translateX(-${obj.that}px)`
// 每次加执行的宽度
obj.that = obj.that + imgWidth
}
</script>
所有用图片如下:
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
下面是完整的代码:
<!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>Document</title>
<style>
* {
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 800px;
height: 800px;
margin: 0px auto;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.content .header {
position: relative;
margin: 50px auto;
overflow: hidden;
line-height: 0
}
/* 上一张按钮 */
.content .prev {
width: 20px;
height: 20px;
border: 1px solid #bebdbd;
margin-right: 5px;
border-radius: 100%;
position: relative;
top: 350px;
cursor: pointer;
}
.content .prev::before {
content: "";
position: absolute;
top: 6px;
right: 5px;
width: 5px;
height: 5px;
border-right: 2px solid rgb(56, 55, 55);
border-bottom: 2px solid rgb(56, 55, 55);
transform: rotate(135deg);
}
.swiper {
transition: all .3s;
}
.swiper img {
width: 700px;
float: left;
cursor: pointer;
}
/* 下一张按钮 */
.content .next {
width: 20px;
height: 20px;
border: 1px solid #bebdbd;
margin-right: 5px;
border-radius: 50%;
margin-left: 5px;
position: relative;
right: -771px;
top: -325px;
cursor: pointer;
}
.content .next::before {
content: "";
position: absolute;
top: 6px;
right: 8px;
width: 5px;
height: 5px;
border-right: 2px solid rgb(56, 55, 55);
border-bottom: 2px solid rgb(56, 55, 55);
transform: rotate(-45deg);
}
.lis {
width: 200px;
height: 20px;
margin: -40px auto;
display: flex;
justify-content: space-between;
}
.lis>li {
width: 15px;
height: 15px;
border-radius: 100%;
margin: 5px;
background-color: aqua;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<!-- 左焦点 -->
<div class="prev"></div>
<div class="header">
<div class="swiper">
<img class="images" src="./image/swiperitem/1.jpg" alt="">
<img src="./image/swiperitem/2.jpg" alt="">
<img src="./image/swiperitem/3.jpg" alt="">
<img src="./image/swiperitem/4.jpg" alt="">
<img src="./image/swiperitem/5.jpg" alt="">
<img src="./image/swiperitem/6.jpg" alt="">
<img src="./image/swiperitem/7.jpg" alt="">
<img src="./image/swiperitem/1.jpg" alt="">
</div>
</div>
<!-- 右焦点 -->
<div class="next"></div>
<ul class="lis">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
const list = ["./image/swiperitem/1.jpg", "./image/swiperitem/2.jpg", "./image/swiperitem/3.jpg", "./image/swiperitem/4.jpg", "./image/swiperitem/5.jpg", "./image/swiperitem/6.jpg", "./image/swiperitem/7.jpg"]
// 获取元素
let imgs = document.querySelector('.images')
let swiper = document.querySelector('.swiper')
let header = document.querySelector('.header')
let lis = document.querySelector('.lis').querySelectorAll('li')
let p = document.querySelector('p')
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')
// 保存img宽度
let imgWidth = imgs.width
// 动态给swiper设置宽度
swiper.style.width = list.length * imgs.width + imgs.width + 'px'
// 动态给herder、设置高度
header.style.width = imgs.width + 'px'
// 设置默认初始值
let obj = {
that: 0,
// 控制是否关闭定时器
buttonClick: true,
btnClick: true
}
// 全局定义一个定时器,方便在各个函数里面访问到,并且控制定时器开关
let timeout = undefined
// 排他思想
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 向左滑动
prev.addEventListener('click', function () {
// 关闭定时器
clearTimeout(timeout)
obj.buttonClick = false
obj.btnClick = false
// 每次加一
obj.that = obj.that + imgWidth
// 判断是否滚动到了最后
if (obj.that >= list.length * imgWidth) {
obj.that = 0
}
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 设置移动的距离
swiper.style.transform = `translateX(-${obj.that}px)`
})
// 向右滑动
next.addEventListener('click', function () {
// // 关闭定时器
clearTimeout(timeout)
obj.buttonClick = false
obj.btnClick = false
obj.that = obj.that - imgWidth
// 如果滑动到了第一张,则跳转到最后一张
if (obj.that < 0) {
obj.that = (list.length - 1) * imgWidth
}
// 排他思想,去除所有的li样式,再重新给一个li设置样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
swiper.style.transform = `translateX(-${obj.that}px)`
})
// 点击ul切换图片
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 关闭定时器
clearTimeout(timeout)
// obj.buttonClick = false
// obj.btnClick = false
obj.that = imgWidth * i
swiper.style.transform = `translateX(-${obj.that}px)`
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
})
}
// 发生点击事件则停止一段时间定时器,过几秒重新开启定时器
Object.defineProperty(obj, "buttonClick", {
// 设置obj为代理
configurable: true,
set() {
// 刚开始关闭定时器
clearInterval(time)
// 间隔1秒重新开启定时器
timeout = setTimeout(() => {
// console.log('即将开启定时器');
time = setInterval(fun, 1500)
obj.btnClick = true
}, 1000)
},
})
// 开启定时器
let time = setInterval(fun, 1500)
function fun() {
if (obj.that >= list.length * imgWidth) {
obj.that = 0
}
// 排他思想,去除ul里面所有的li的样式
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'aqua'
}
// 动态的给li加样式
lis[obj.that / imgWidth].style.backgroundColor = 'pink'
// 设置移动的距离
swiper.style.transform = `translateX(-${obj.that}px)`
// 每次加执行的宽度
obj.that = obj.that + imgWidth
}
</script>
</body>
</html>