首页 前端知识 【HTML CSS jQuery】实现轮播图详细代码及详解(带左右切换和分页)

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

2024-05-09 11:05:43 前端知识 前端哥 481 168 我要收藏

效果

 代码实现

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. 通过 onmouseenteronmouseleave 事件来在鼠标悬停在轮播容器上时停止自动轮播,离开时重新开始自动轮播。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7727.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!