JavaScript||最简单的轮播图实现

本是古典何须时尚 2023-05-22 22:33 6阅读 0赞

今天给大家分享的是一个具简单的轮播图，只实现了最基本的轮播功能，感兴趣的仁可以康康~

## 页面布局 ##

由于当时只计划实现简单的自动轮播功能，此次的代码量巨少。页面布局我主要选择了“img”和“input”标签，它们分别存放图片和图片下的小圆点，而为了后面布局方便，我选用了两个”div"标签作为容器，下面直接放代码。

页面布局完成又页面是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## CSS样式设计 ##

哈哈，布局完成后的页面实在太…所以对其进行样式设计势在必行，我主要是将图片固定大小后居中，在给它加一个小边框。而小圆点基本上没怎么修改，仅仅利用绝对定位让其呆在该在的位置。话不多说，下面放代码和添加样式后图片：

body{ 
    	text-align: center;
    	width: auto;
    	height: auto;
    }
    img{ 
    	text-align: center;
    	width: 600px;
    	height: 400px;
    	border: 4px solid black;
    	border-radius: 16px;
    }
    #ddd{ 
    	width: 10%;
    	position: absolute;
    	left: 45%;
    	margin-top: -32px;
    	
    }
    input{ 
    	background-color: wheat;
    	color: gold;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]

## js功能实现 ##

万事俱备，只欠实现啦，这次的js代码也很简单，主要是用到了一个函数：setInterval（需要重复执行的函数名， 重复的时间间隔）  
下面是js代码：

最后放上测试的效果图：

\#JAVASCRIPT\#轮播图

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230521/45a2d953c51b4af495968bf530d6f4e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230521/44cb599b0b514473be231c827794d5dc.png