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

缺乏、安全感 2022-10-06 09:55 234阅读 0赞

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

制作背景

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

效果图

![86d1ae3209ae][]

静态图

![86d1ae3209ae][]

动态图

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

源代码

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;

![Image 1][]

标题文本1

![Image 1][]

标题文本2

![Image 1][]

标题文本3

![Image 1][]

标题文本4

![Image 1][]

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代码中命名保持一致

图片素材

![86d1ae3209ae][]

timg1.jpg

![86d1ae3209ae][]

timg2.jpg

![86d1ae3209ae][]

timg3.jpg

![86d1ae3209ae][]

timg4.jpg

![86d1ae3209ae][]

arrow-l.png

![86d1ae3209ae][]

arrow-r.png

总结

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

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

[86d1ae3209ae]: /images/20221005/71560b8dc6bc405cacb7112fa37348f3.png
[Image 1]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关网页轮播图+缓动效果

相关 js原生网页轮播图

相关轮播图实现html,html、css、js实现轮播图

相关左右无缝轮播html,JS实现左右无缝轮播图代码

相关 html5用css实现轮播,[网页设计]CSS3 实现简单轮播图

相关网页轮播图制作

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

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

相关图片轮播html原生代码,原生js实现轮播图的示例代码

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)