轮播动画来提升页面的颜值和交互性能，下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图。
轮播图简介：在一个网站的某一特定模块，通过电脑上鼠标点击或鼠标移入、手机上手指滑动后，可以分别展示不同的图片，这个模块就叫做轮播模块。
(做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~)
html布局部分:
<div id="box">
<div class="scenery pic">
<img class="show" src="imgs/s2.jpg" alt="scenery">
<img src="imgs/s3.jpg" alt="scenery">
<img src="imgs/s1.jpg" alt="scenery">
<img src="imgs/s5.jpg" alt="scenery">
<img src="imgs/s4.jpg" alt="scenery">
</div>
<div class="car pic">
<img src="imgs/animal4.jpg" alt="animal">
<img src="imgs/animal3.jpg" alt="animal">
<img src="imgs/animal2.jpg" alt="animal">
<img src="imgs/animal1.jpg" alt="animal">
</div>
<div class="entertainment pic">
<img src="imgs/entertainment1.jpg" alt="entertainment">
<img src="imgs/entertainment2.jpg" alt="entertainment">
<img src="imgs/entertainment3.jpg" alt="entertainment">
<img src="imgs/entertainment4.jpg" alt="entertainment">
<img src="imgs/entertainment5.jpg" alt="entertainment">
</div>
<div class="leftbar">
<div class="checked">风景</div>
<div>名车</div>
<div>娱乐</div>
</div>
<div class="bottombar">
</div>
</div>CSS样式部分:
#box {
position: relative;
width: 460px;
height: 300px;
margin: 40px auto;
border: 1px solid rgb(109, 98, 98);
user-select: none;
}
.leftbar {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: -1px;
left: -80px;
width: 80px;
height: 100%;
text-align: center;
font-size: 20px;
cursor: pointer;
}
.leftbar div {
flex: 1;
line-height: 100px;
background-color: cadetblue;
letter-spacing: 5px;
}
.leftbar div:nth-child(2) {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.bottombar {
display: flex;
justify-content: space-between;
position: absolute;
bottom: -1px;
right: -1px;
z-index: 10;
width: 200px;
height: 30px;
cursor: pointer;
}
.bottombar div {
flex: 1;
line-height: 30px;
background-color: rgb(232, 233, 235, .5);
text-align: center;
font-weight: 700;
}
.bottombar div~div {
border-left: 1px solid grey;
}
img {
position: absolute;
display: block;
width: 460px;
height: 300px;
}
.show {
z-index: 5;
}
.leftbar .checked,
.bottombar .checked {
background-color: rgb(241, 5, 5);
}javascript逻辑实现部分:
var Box = document.querySelector('#box'), pic = Box.querySelectorAll('.pic'),
Idx = 0, index = 0, timer = null,
ltDiv = Box.querySelector('.leftbar'), btDiv = Box.querySelector('.bottombar'),
Img = Box.querySelectorAll('img');
function createBtBar(len) {//动态创建底部切换按钮
var str = '';
for (var i = 0; i < len; i++) {
str += `<div>${i + 1}</div>`;
}
btDiv.innerHTML = str;
btDiv.children[0].classList.add('checked');
}
function initialize() {//页面初始状态
createBtBar(pic[0].children.length);
}
initialize();
function clearZindex() {//重置所有图片的定位层级
for (var k = 0; k < Img.length; k++) {
Img[k].classList.remove('show');
}
}
ltDiv.addEventListener('click', (e) => {//侧边栏项目切换
if (e.target.tagName.toLowerCase() === 'div') {
for (var j = 0; j < ltDiv.children.length; j++) {
ltDiv.children[j].classList.remove('checked');
}
clearZindex();
Idx = 0;
index = getEleIdx(e.target);
ltDiv.children[index].classList.add('checked');
pic[index].children[0].classList.add('show');
createBtBar(pic[index].children.length);
}
});
btDiv.addEventListener('click', (e) => {//委托监听底部切换按钮
if (e.target.tagName.toLowerCase() === 'div') {
function changePic(callback) {
btDiv.children[Idx].classList.remove('checked');
clearZindex();
callback && callback();
btDiv.children[Idx].classList.add('checked');
pic[index].children[Idx].classList.add('show');
}
changePic(function () {
Idx = getEleIdx(e.target);
});
}
});
function getEleIdx(item) {//获取DOM元素下标
var elements = item.parentNode.children;
for (var i = 0, len = elements.length; i < len; i++) {
if (item === elements[i]) {
return i;
}
}
}
function loopShow() {//循环自动展示
clearInterval(timer);
timer = setInterval(function () {
pic[index].children[Idx].classList.remove('show');
btDiv.children[Idx].classList.remove('checked');
Idx += 1;
if (Idx < 0 || Idx > pic[index].children.length - 1) {
Idx = 0;
}
pic[index].children[Idx].classList.add('show');
btDiv.children[Idx].classList.add('checked');
}, 1000);
}
loopShow();
Box.addEventListener('mouseover', function () {
clearInterval(timer);//鼠标移入展示区停止轮播
});
Box.addEventListener('mouseout', function () {
loopShow();//鼠标移出展示区自动轮播
});具体实现的展示效果入下:
(Tip: 各位注意自行准备图片放到自己的文件夹里哦~)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
