JavaScript实现京东首页轮播图

目录

轮播图效果

页面实现效果

将js引入html中 

html

css

js

图片

---

轮播图效果

1. 每隔 4 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。
2. 当鼠标移入时会自动暂停播放，鼠标移出则会继续。
3. 如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
4. 正下方会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示。

   ---

页面实现效果

---

将js引入html中 

<!-- 引用工具 -->
    <script type="text/javascript" src="./tools.js"></script>
    <script type="text/javascript" src="./index.js"></script>

---

html

<div id="outer">
                <button id="prev">
                    <i class="fas fa-angle-left"></i>
                </button>
                <ul id="imgList">
                    <li>
                        <a href="#">
                            <img class="imm" src="./img/京东3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="imm" src="./img/京东4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="imm" src="./img/京东5.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="imm" src="./img/京东6.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img cl