写一个简易的javascript原生js写轮播图

最新推荐文章于 2024-07-25 11:02:11 发布

原创最新推荐文章于 2024-07-25 11:02:11 发布 · 789 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

4 篇文章

订阅专栏

本文介绍如何使用原生JavaScript制作一个简单的前端轮播图效果，包括图片切换及指示点联动。通过具体HTML结构展示，易于理解和上手。

作为一个Javaweb工程师既要写的了后端代码也要写的了前端页面，下面介绍一下我最近新学的原生js写前端轮播图。

一、

就是这么简单，试试吧!

<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>