JS原生代码实现轮播图（无左右滑动，底下圆点按钮）

一点点墨

于 2018-01-09 18:54:24 发布

阅读量2.9k

点赞数

分类专栏： css+html javascript

本文链接：https://blog.csdn.net/SmileRM/article/details/79016229

版权

本文介绍了使用JavaScript原生代码实现无左右滑动的图片轮播图，通过HTML、CSS和JavaScript配合，实现图片的自动切换。在切换过程中，底部的灰色提示点会随着图片的切换逐渐显示。文章详细讲解了实现思路，包括HTML结构、CSS样式和JavaScript逻辑，并提到了涉及到的新知识点，如obj.style.property、currentStyle和getComputedStyle等属性的用法。

摘要由CSDN通过智能技术生成

先上效果图：

由于动态图太大，所以只能截屏了；大致效果，图片轮播的过程中，底下的灰色提示渐渐出现；

现在来说实现思路：

HTML部分：

<div id="content">  
    <img id="img1" />
    <img id="img2" />
    <div id="intro">
        <span></span>
    </div>
</div>

CSS部分：

img,div,ul,li { margin:0;padding:0;}
#content { margin:100px auto 0 auto;width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;}
#img1 { position:absolute;top:0;left:0;}
#img2 { position:absolute;top:0;left:600px;}
#intro {
 width:600px; height:60px; position:absolute; top:340px; left:0