网页设计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;

margin: 0 12px;

}

.title {

font-size: 18px;

color: #f2f2f2;

position: absolute;

text-align: center;

font-weight: 700;

width: 100%;

bottom: 10px;

}

.active {

background-color: #717171;

}

#arrow {

position: absolute;

top: 50%;

margin-top: -30px;

width: 100%;

opacity: .3;

transition: opacity 2s;

}

#divout:hover #arrow {

opacity: .9;

}

#arrow img {

cursor: pointer;

}

.imgdiv {

animation: fade 1.5s;

}

@keyframes fade {

from {

opacity: .3;

}

to {

opacity: 1;

}

}

标题文本1

标题文本2

标题文本3

标题文本4

var imgIndex = 0;

var imgDivArr = document.getElementsByClassName("imgdiv");

var dotArr = document.getElementsByClassName("dot");

/**

* 播放图片

* 参数r：是否正放，若为true，正放。若为false，倒放

*/

function picplay(r) {

for (let i = 0; i < imgDivArr.length; i++) {

imgDivArr[i].style.display = "none";

dotArr[i].className = "dot";

}

if (r) {

imgIndex++;

imgIndex = (imgIndex >= imgDivArr.length) ? 0 : imgIndex;

} else {

imgIndex--;

imgIndex = (imgIndex < 0) ? imgDivArr.length - 1 : imgIndex;

}

imgDivArr[imgIndex].style.display = "block";

dotArr[imgIndex].className = "dot active";

}

setInterval(picplay, 3000, true);

使用方法

将此段代码保存到一个html文件中

在html文件旁边新建一个文件夹命名 images

将6张图片保存到 images 文件夹中，命名要和html代码中命名保持一致

图片素材

timg1.jpg

timg2.jpg

timg3.jpg

timg4.jpg

arrow-l.png

arrow-r.png

总结

此轮播图的实现逻辑较为简单，图片的切换方式只是简单的淡化效果，而复杂的轮播图切换效果可能是左右滑动。

在逻辑上有待所改进，比如：在点击后，自动切换时间将会延迟一秒，这样能避免恰好点击时刻在自动切换的那一刹那之前导致一下子跨越了一个图片。