【HTML CSS jQuery】实现轮播图详细代码及详解（带左右切换和分页）

效果

 代码实现

var init_time = 0
    // 获取图片区域
var img_box = document.querySelector(".img_box")
    // 获取轮播容器
var silder_box = document.querySelector(".silder_box")
 
// 获取图片的容器
var li_list = document.querySelectorAll(".silder_box .img_box li")
 
img_box.style.left = "-100%"
    // 初始化辅助无缝轮播图片
var last_li = img_box.firstChild.nextSibling.cloneNode(true)
var first_li = img_box.lastChild.previousSibling.cloneNode(true)
img_box.insertBefore(first_li, img_box.firstChild)
img_box.appendChild(last_li)
    //轮播核心代码
function change(offset) {
    var newoffset = parseInt(img_box.style.left) + offset
    var step = 10
    var speed = offset / step
 
    var animate = function() {
            img_box.style.left = parseInt(img_box.style.left) + speed + "%"
 
            if (speed < 0 && parseInt(img_box.style.left) > newoffset || speed > 0 && parseInt(img_box.style.left) < newoffset) {
                setTimeout(animate, 100)
            } else {
 
                if (newoffset <= -400) {
                    img_box.style.left = "-100%"
                } else if (newoffset >= 0) {
                    img_box.style.left = "-300%"
                }
            }
 
        }
    animate()
}
 
//创建左右切换容器
var ul = document.createElement("ul")
 
ul.className = "btns"
    //创建左右切换按钮
var left_li = document.createElement("li")
var right_li = document.createElement("li")
left_li.innerHTML = "<"
right_li.innerHTML = ">"
 
ul.appendChild(left_li)
ul.appendChild(right_li)
silder_box.appendChild(ul)
 
//创建图片对应按钮的容器
var dotts = document.createElement("ul")
dotts.className = "dotts"
    //批量生成图片对应的按钮
for (var i = 0; i < li_list.length; i++) {
    var li = document.createElement("li")
    li.innerHTML = i + 1
    li.setAttribute("index", i)
    if (i == 0) {
        li.className = "current"
    }
    dotts.appendChild(li)
}
 
//给轮播区域添加按钮容器
silder_box.appendChild(dotts)
 
 
//获取所有图片对应的按钮
var dotts_li = document.querySelectorAll(".dotts li")
    //定义游标记录当前图片对应按钮的索引值
var index = 0
    //定义高亮函数
function highlight() {
    for (var k = 0; k < dotts_li.length; k++) {
        dotts_li[k].className = ""
    }
    dotts_li[index].className = "current"
}
 
//给图片对应的按钮绑定点击事件
for (var h = 0; h < dotts_li.length; h++) {
    dotts_li[h].onclick = function() {
        var target_index = this.getAttribute("index")
        change((index - target_index) * 100)
        index = target_index
        highlight()
    }
}
 
//给左右按钮绑定点击事件
left_li.onclick = function() {
    if (init_time == 0) {
        index--
        if (index < 0) {
            index = 2
        }
        highlight()
        change(100)
 
        //辅助代码
        init_time = 1
        var timing = setInterval(function() {
            init_time--
            if (init_time == 0) {
                clearInterval(timing)
            }
 
        }, 1000)
 
 
    }
 
}
right_li.onclick = function() {
    if (init_time == 0) {
        index++
        if (index > 2) {
            index = 0
        }
        highlight()
        change(-100)
            //辅助代码
        init_time = 1
        var timing = setInterval(function() {
            init_time--
            if (init_time == 0) {
                clearInterval(timing)
            }
 
        }, 1000)
    }
}
 
//定时器开启
var timer = setInterval(right_li.onclick, 3000)
 
//放到轮播容器上，停止自动轮播
silder_box.onmouseenter = function() {
        clearInterval(timer)
    }
    //离开轮播容器上，开始自动轮播
silder_box.onmouseleave = function() {
    timer = setInterval(right_li.onclick, 3000)
}复制

代码解释：

1. 在HTML中，使用了一个 .silder_box 容器来包裹轮播图片，使用 .img_box 容器来放置图片，以及两个按钮 .btns 和圆点导航 .dotts 来实现左右切换和图片对应的圆点导航。

2. JavaScript代码中，定义了 change(offset) 函数来实现图片区域的滑动效果。在函数内部使用了 animate 函数来处理图片的动画滑动，实现了无缝轮播的效果。

3. 在图片初始化时，使用了 insertBefore() 和 appendChild() 方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。

4. 创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过 change(offset) 函数来切换图片，并高亮显示对应的按钮。

5. 创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。

6. 使用定时器 setInterval() 实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。

7. 通过 onmouseenter 和 onmouseleave 事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。