网页设计html轮播代码,20行js代码实现网页轮播图效果

20行js代码实现网页轮播图效果(2020年12月11日)

制作背景

大二上学期临近期末，网页课上讲到了js制作轮播图，对课上的js代码进行了适当简化和调整。

效果图

静态图

动态图

当前功能是：网页轮播图在自动切换的同时还可以手动切换

源代码

picplay

#divout {

max-width: 1000px;

position: relative;

margin: 0 auto;

}

.imgdiv img {

width: 100%;

}

.imgdiv {

display: none;

}

.dotdiv {

text-align: center;

position: absolute;

width: 100%;

bottom: -30px;

}

.dot {

width: 16px;

height: 16px;

display: inline-block;

background: #bbbbbb;

border-radius: 10px;

m