效果
代码实现
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)
}
代码解释:
-
在HTML中,使用了一个
.silder_box
容器来包裹轮播图片,使用.img_box
容器来放置图片,以及两个按钮.btns
和圆点导航.dotts
来实现左右切换和图片对应的圆点导航。 -
JavaScript代码中,定义了
change(offset)
函数来实现图片区域的滑动效果。在函数内部使用了animate
函数来处理图片的动画滑动,实现了无缝轮播的效果。 -
在图片初始化时,使用了
insertBefore()
和appendChild()
方法,在图片列表的首尾分别插入了复制的图片,实现无缝轮播的效果。 -
创建了图片对应的圆点导航按钮,并为每个按钮绑定了点击事件,点击按钮时通过
change(offset)
函数来切换图片,并高亮显示对应的按钮。 -
创建了左右切换按钮,并为其绑定了点击事件,通过点击按钮来切换图片。
-
使用定时器
setInterval()
实现自动轮播功能,每隔3000毫秒(3秒)切换到下一张图片。 -
通过
onmouseenter
和onmouseleave
事件来在鼠标悬停在轮播容器上时停止自动轮播,离开时重新开始自动轮播。