HTML部分源码:
<body>
<div class="box">
<div class="img"><img src="../images/1.png" alt=""></div>
<div class="prev all">
<a href="#"><</a>
</div>
<div class="next all">
<a href="#">></a>
</div>
<div class="title">
<p>这是第一张图片</p>
<ul class="ul">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
CSS部分源码:
定义相关样式
<style>
.box {
margin: 0 auto;
width: 500px;
height: 365px;
position: relative;
}
.img img {
width: 500px;
height: 310px;
}
.title {
display: inline-block;
width: 100%;
height: 50px;
margin-top: -5px;
background-color: pink;
}
.title p {
margin: 0px;
text-indent: 1em;
color: aqua;
}
.ul {
display: flex;
list-style: none;
padding: 0px;
margin: 0px;
}
.ul li {
width: 8px;
height: 8px;
margin: 8px;
border-radius: 50%;
background-color: gray;
cursor: pointer;
}
.all {
position: absolute;
top: 35%;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: skyblue;
}
.prev {
left: 0px;
border-radius: 0 800px 800px 0;
}
.next {
right: 0px;
border-radius: 800px 0 0 800px;
}
.ul .active {
width: 10px;
height: 10px;
background-color: #fff;
}
JavaScript部分源码
JS整体实现思路:
1.获取元素
2.声明一个自增变量
3.判断长度 如果大于数组长度,则重置(下一张)
4.修改元素内容
5.判断长度 如果小于0,则跳到最后一张(上一张)
6.将相同代码封装到函数直接调用 简化第四步 上一张和下一张调用函数
7.定时器
8.鼠标经过停止定时器
9.鼠标离开重新进行自动播放(调用定时器 调用前先停止一下)
<script>
// 数组对象内存放图片,可以继续增加
const arr = [
{ URL: '../images/1.png', title: '这是第一张图片', color: 'pink' },
{ URL: '../images/2.png', title: '这是第二张图片', color: 'rgb(43, 35, 26)' },
{ URL: '../images/3.png', title: '这是第三张图片', color: 'rgb(10, 67, 68)' },
{ URL: '../images/4.png', title: '这是第四张图片', color: 'rgb(40, 67, 68)' },
{ URL: '../images/5.png', title: '这是第五张图片', color: 'rgb(50, 67, 68)' },
{ URL: '../images/6.png', title: '这是第六张图片', color: 'rgb(100, 71, 68)' },
]
/*
1.获取对象
2.自动播放
3.将共同的代码封装到一个函数内
4.左右点击事件
5.自动播放
6.鼠标经过停止
7.鼠标离开恢复自动播放
*/
const box = document.querySelector('.box')
const img = document.querySelector('img')
const prev = document.querySelector('.prev a')
const next = document.querySelector('.next a')
const p = document.querySelector('.title p')
const color = document.querySelector('.title')
let i = 0
// 封装一个共同代码的函数 更改页面样式
function start() {
img.src = arr[i].URL
p.innerHTML = arr[i].title
color.style.backgroundColor = arr[i].color
document.querySelector('.ul .active').classList.remove('active')
document.querySelector(`.ul li:nth-child(${i + 1})`).classList.add('active')
}
// 上一张
prev.addEventListener('click', function () {
i--
if (i < 0) {
i = arr.length - 1
}
start()
})
// 下一张
next.addEventListener('click', function () {
i++
if (i >= arr.length) {
i = 0
}
start()
})
// 定时器 自动播放
let stop = setInterval(function () {
next.click()
}, 1000)
// 鼠标经过停止
box.addEventListener('mouseenter', function () {
// 停止定时器
clearInterval(stop)
})
// 鼠标离开继续播放
box.addEventListener('mouseleave', function () {
// 停止定时器 防止离开次数越多轮播效果越快
clearInterval(stop)
// 开启定时器
stop = setInterval(function () {
next.click()
}, 1000)
})
最终效果(有一张图片下边有白边,所以看起来像事没对齐样式,样式比较丑,可以自己更改,博主只是为了练习JS的语法语句,随便打的css样式):