基于JavaScript实现仿京东图片轮播效果

我会为你详细讲解如何基于JavaScript实现仿京东图片轮播效果的完整攻略。

1. 准备工作

在开始实现之前，需要先准备好以下内容:
- 一份HTML文档，在其中包含轮播图片的标签
- 用于存储图片的路径数组
- 一个计时器用于定时切换图片
- 两个按钮，分别用于切换到上一张或下一张图片

以下是一个简单的HTML文档示例，其中包含一张图片和两个按钮:

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播效果</title>
</head>
<body>
    <img src="images/1.jpg" id="img" width="500" height="300">
    <br>
    <button onclick="pre()">上一张</button>
    <button onclick="next()">下一张</button>
</body>
</html>

2. 实现方法

2.1 切换图片

为了实现轮播效果，需要动态地更改标签的src属性。可以通过使用JavaScript来实现该功能。我们可以在JavaScript代码中定义一个计数器变量i，来控制图片的切换，其中i的初始值为0，表示展示第一张图片。然后通过设置img的src属性来更换图片，如下所示:

var index = 0;
var imgs = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
var img = document.getElementById("img");

function pre() {
    index--;
    if (index < 0) {
        index = imgs.length - 1;
    }
    img.src = imgs[index];
}

function next() {
    index++;
    if (index >= imgs.length) {
        index = 0;
    }
    img.src = imgs[index];
}

在上述代码中，我们定义了imgs数组来存储图片的路径，img变量代表要切换的图片，pre()函数用于向前切换图片，next()函数用于向后切换图片。在pre()和next()函数中，index变量代表当前展示的图片在数组中的下标，切换图片时，将index加1，减1拿到下一张或上一张图片的路径，再将其设置为img的src属性值即可。

2.2 自动轮播

我们还需要一种方法，通过定时器来自动播放图片。只需要定义一个定时器，每隔一段时间就调用next()函数即可，如下所示:

var timer = setInterval(next, 3000);

function stop() {
    clearInterval(timer);
}

function start() {
    timer = setInterval(next, 3000);
}

在上述代码中，我们定义了一个名为timer的计时器，并将其赋值为调用setInterval()函数的返回值。setInterval()函数接受两个参数: 执行的函数和指定的间隔时间(以毫秒为单位)。在定义了定时器后，我们还定义了两个函数: start()和stop()。分别用于启动和停止定时器。
我们在配置上一张和下一张按钮的时候，可以加上鼠标悬浮时的停止和结束功能。我们可以监听onmouseover和onmouseout事件，当鼠标悬浮在按钮上时，调用stop()函数停止定时器，当鼠标离开按钮时，调用start()函数重新启动定时器，如下所示:

<button onclick="pre()" onmouseover="stop()" onmouseout="start()">上一张</button>
<button onclick="next()" onmouseover="stop()" onmouseout="start()">下一张</button>

2.3 优化

在上述示例中，我们仅考虑了一个简单的图片切换效果。如果要提升用户体验和美感，我们还可以添加以下优化：
- 加上图片切换时的淡入淡出效果
- 增加圆点指示器，标识当前展示的图片
- 优化代码，将图片路径等信息独立定义在一个对象里，便于维护和管理

为了增加图片淡入淡出效果，我们可以使用opacity和Transition等CSS属性，代码如下：

#img {
    opacity: 0; /* 默认隐藏图片 */
    transition: opacity .5s; /* 设置过渡效果 */
}

然后，在改变图片路径后，通过修改img的opacity属性来实现淡入淡出效果，如下所示:

function pre() {
    index--;
    if (index < 0) {
        index = imgs.length - 1;
    }
    img.style.opacity = 0; // 隐藏图片
    setTimeout(function () {
        img.src = imgs[index]; // 切换图片
        img.style.opacity = 1; // 显示图片
    }, 500);
}

function next() {
    index++;
    if (index >= imgs.length) {
        index = 0;
    }
    img.style.opacity = 0; 
    setTimeout(function () {
        img.src = imgs[index];
        img.style.opacity = 1;
    }, 500);
}

需要注意的是，在切换图片前，我们需要将图片的opacity属性设置为0，表示将图片进行隐藏，然后在500毫秒后再将图片的src和opacity属性分别赋值为切换后图片路径和1，使图片渐渐地显示出来。

为了实现圆点指示器，我们可以定义一个

元素，并将其添加到

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
        #img {
            opacity: 0;
            transition: opacity .5s;
        }

        #dots {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        #dots li {
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            border-radius: 50%;
            background: #fff;
            margin-right: 5px;
            float: left;
            cursor: pointer;
        }

        #dots li.active {
            background: #000;
        }
    </style>
</head>
<body>
    <img src="images/1.jpg" id="img" width="500" height="300">
    <ul id="dots">
    </ul>
    <br>
    <button onclick="pre()" onmouseover="stop()" onmouseout="start()">上一张</button>
    <button onclick="next()" onmouseover="stop()" onmouseout="start()">下一张</button>
    <script>
        var index = 0;
        var imgs = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
        var img = document.getElementById("img");
        var timer = null;

        // 图片自动轮播
        function autoPlay() {
            timer = setInterval(next, 3000);
        }

        // 停止播放
        function stop() {
            clearInterval(timer);
        }

        // 开始播放
        function start() {
            timer = setInterval(next, 3000);
        }

        // 切换到上一张图片
        function pre() {
            index--;
            if (index < 0) {
                index = imgs.length - 1;
            }
            img.style.opacity = 0;
            setTimeout(function () {
                img.src = imgs[index];
                img.style.opacity = 1;
            }, 500);
            switchDot(index);
        }

        // 切换到下一张图片
        function next() {
            index++;
            if (index >= imgs.length) {
                index = 0;
            }
            img.style.opacity = 0;
            setTimeout(function () {
                img.src = imgs[index];
                img.style.opacity = 1;
            }, 500);
            switchDot(index);
        }

        // 切换圆点
        function switchDot(curIndex) {
            var dots = document.querySelectorAll("#dots li");
            for (var i = 0; i < dots.length; i++) {
                dots[i].className = "";
            }
            dots[curIndex].className = "active";
        }

        // 自动生成圆点
        function createDots() {
            var dots = document.querySelector("#dots");
            for (var i = 0; i < imgs.length; i++) {
                var li = document.createElement("li");
                li.addEventListener("click", function () {
                    var index = Array.prototype.indexOf.call(this.parentNode.children, this);
                    switchDot(index);
                    img.style.opacity = 0;
                    setTimeout(function () {
                        img.src = imgs[index];
                        img.style.opacity = 1;
                        index = curIndex;
                    }, 500);
                });
                dots.appendChild(li);
            }
            switchDot(0);
        }

        createDots();
        autoPlay();
    </script>
</body>
</html>

在上述代码中，我们在HTML文档中新增了一个空的