作者:书友68610983 | 来源:互联网 | 2023-09-11 15:38
本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下
先看效果图
![](https://img1.php1.cn/3cd4a/24bf4/978/e605205bb96e90d0.jpeg)
第一种
//点击按钮,序号变化
showIdx++;
if (showIdx == imgArr.length) {
showIdx = 0;
}
//所有盒子左移动
for (let i = 0; i `;
} else {
deleteBox.innerHTML = `
`;
}
![](https://img1.php1.cn/3cd4a/24bf4/978/a79942c10eb55f00.jpeg)
第二种,图片切换,css代码
html,
body,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.loopbox {
width: 1226px;
height: 460px;
background: #030;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
float: left;
transition: all .3s;
position: absolute;
left: 0;
/* overflow: hidden; */
}
.box.notran{
transition: none;
}
.box-item {
/* width: 100%; */
width: 1226px;
height: 100%;
float: left;
background: #f1f1f1;
text-align: center;
font-size: 24px;
line-height: 100px;
/* display: none; */
/* transition: all .3s; */
}
.box-item img {
width: 100%;
height: 100%;
/* 图片适应 */
object-fit: cover;
}
.arrow {
width: 60px;
line-height: 30px;
background: #f00;
text-align: center;
color: #f1f1f1;
position: absolute;
top: 50%;
left: 10px;
margin-top: -15px;
border-radius: 15px;
}
.arrow:hover {
background: #f60;
}
.arrow.arrow-right {
left: auto;
right: 10px;
}
.page {
position: absolute;
width: 100%;
text-align: center;
bottom: 10px;
}
.page li {
display: inline-block;
width: 80px;
height: 8px;
border-radius: 4px;
background: #000;
}
/* .page li:first-child {
background: #f90;
} */
.page li:hover {
background: #f60;
}
.page li.current {
background: #f90;
}
.side-qq {
width: 100px;
height: 100px;
background: #f00;
/* position: fixed; */
position: absolute;
right: 10px;
top: 450px;
}
.navbar {
width: 100%;
background: #ccc;
text-align: center;
}
.navbar.fixed {
position: fixed;
left: 0;
top: 0;
}
.nav {
height: 21px;
}
js
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。