话不多说,这里主要实现轮播图自动切换,点击下方tag小按钮后切换到对应图片,由于css与html代码比较简单,就直接上js代码,最后会贴上完整代码。
第一步:实现图片的自动切换
//获取轮播图盒子节点
var list = document.querySelector('.carousel')
//获取轮播图盒子中的图片节点
var imgArr = document.getElementsByTagName('img')
//动态设置轮播图盒子的宽度
list.style.width = 600 * imgArr.length + 'px'
//图片的索引
var index = 0
//定时器
var timer
//调用定时器函数
auto()
function auto() {
timer = setInterval(function () {
index++
//设置index的长度,使其不会超过图片的长度
index %= imgArr.length
move(list, -600 * index, 40, 'left', function () {
//回调函数中需要加入判断,当索引值超出数组长度时,默认跳回第一张图片
//这里使用补图的方式,在最后加多一张与第一张图片相同的,这样就可以做到无缝衔接。
if (index >= imgArr.length - 1) {
index = 0
list.style.left = 0
}
})
}, 2000)
}
//move函数,用于移动图片
//形参的意义分别是:box-轮播图盒子节点;target图片移动的目标位置;
//speed移动速率(不带正负号);way-移动的方向;callback-回调函数
function move(box, target, speed, way, callback) {
//parseInt不能少,getStyle得到的属性后面是带px的,转化为纯数字
var current = parseInt(getStyle(list, way))
//判断图片当前位置与目标位置的关系并且修改移动方向,因为传入的速率不带正负号
if (current > target) {
speed = -speed
}
box.timer = setInterval(function () {
var oldValue = parseInt(getStyle(list, way))
var newValue = oldValue + speed
//判断图片是否超出了目标位置,因为在临界情况中会出现最后一上速率时超
//过了目标位置的情况,如果超出,就将目标位置赋值给newValue
if (speed < 0 && newValue < target || speed > 0 && newValu> target) {
newValue = target
}
//修改轮播图盒子的left值,因为轮播图默认都是从右往左,way一传入left
box.style[way] = newValue + 'px'
if (newValue == target) {
//如果这一次图片移动完毕,就清除定时器,等待下次开启,用回调函数
clearInterval(box.timer)
callback && callback()
}
}, 50)
}
function getStyle(obj, key) {
return getComputedStyle(obj, null)[key]
}
window.onload()该方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
getComputedStyle()方法用于获取DOM元素实际显示时的样式。
第二步:下方导航tag的实现
var tag = document.getElementById('tag')
var tagArr = tag.getElementsByTagName('div')
//默认第一个tag为选中状态,即背景为黑色
tagArr[index].style.backgroundColor = 'black'
for (i = 0; i < tagArr.length; i++) {
//给每个tag绑定一个属性num,用于标识是第几个tag
tagArr[i].num = i
tagArr[i].onclick = function () {
//点击时将该tag对应num赋值给图片索引index
index = this.num
//点击后需要清除自动切换的定时器
clearInterval(timer)
//调用修改tag背景的方法
setTag()
//修改轮播图盒子的left值,并且设置延时器在3s后在启开启自动切换的定时器
//这里也可以调用move函数,切换的时候就会比较平缓,然后回调函数中调用auto开启定时器即可
list.style.left = -600 * index + 'px'
setTimeout(() => {
auto()
},3000)
}
}
function setTag() {
//这里也要判断索引是否超出图片数组最大值,因此之前在调用move函数中的判断其实可以省略,直接
//在setTag函数中判断一次即可
if (index >= imgArr.length - 1) {
index = 0
list.style.left = 0
}
//遍历所有的tag,全部背景颜色值为空,即设置为css中书写的默认值
for (i = 0; i < tagArr.length; i++) {
tagArr[i].style.backgroundColor = ''
}
//修改当前图片索引对应的tag背景颜色为黑色
tagArr[index].style.backgroundColor = 'black'
}
最后附上完整代码:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
height: 500px;
background-color: red;
margin: 100px auto;
padding-top: 5px;
position: relative;
overflow: hidden;
}
.carousel {
position: absolute;
height: 490px;
width: 3000px;
background-color: aqua;
}
.carousel img {
width: 590px;
height: 490px;
margin-left: 5px;
}
#tag {
width: 180px;
height: 30px;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
#tag div {
float: left;
width: 30px;
height: 30px;
margin-right: 5px;
background-color: red;
opacity: 0.5;
cursor: pointer;
}
#tag div:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel">
<img src="../1.png" alt="">
<img src="../2.png" alt="">
<img src="../3.jpg" alt="">
<img src="../4.png" alt="">
<img src="../5.png" alt="">
<img src="../1.png" alt="">
</div>
<div id="tag">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
window.onload = function () {
var list = document.querySelector('.carousel')
var imgArr = document.getElementsByTagName('img')
list.style.width = 600 * imgArr.length + 'px'
var index = 0
var timer
var tag = document.getElementById('tag')
var tagArr = tag.getElementsByTagName('div')
tagArr[index].style.backgroundColor = 'black'
for (i = 0; i < tagArr.length; i++) {
tagArr[i].num = i
tagArr[i].onclick = function () {
index = this.num
clearInterval(timer)
setTag()
list.style.left = -600 * index + 'px'
setTimeout(() => {
auto()
},3000)
}
}
auto()
function setTag() {
if (index >= imgArr.length - 1) {
index = 0
list.style.left = 0
}
for (i = 0; i < tagArr.length; i++) {
tagArr[i].style.backgroundColor = ''
}
tagArr[index].style.backgroundColor = 'black'
}
//auto
function auto() {
timer = setInterval(function () {
index++
index %= imgArr.length
move(list, -600 * index, 40, 'left', function () {
setTag()
})
}, 2000)
}
//move函数
function move(box, target, speed, way, callback) {
//parseInt不能少,getStyle得到的属性后面是带px的,转化为纯数字
var current = parseInt(getStyle(list, way))
console.log(parseInt(getStyle(list, way)))
if (current > target) {
speed = -speed
}
box.timer = setInterval(function () {
var oldValue = parseInt(getStyle(list, way))
var newValue = oldValue + speed
if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
newValue = target
}
box.style[way] = newValue + 'px'
if (newValue == target) {
clearInterval(box.timer)
callback && callback()
}
}, 50)
}
function getStyle(obj, key) {
return getComputedStyle(obj, null)[key]
}
}
</script>
</body>
</html>
以上代码复制后修改图片路径即可直接运行