轮播图练习实例

最新推荐文章于 2024-09-11 17:09:49 发布

kele196283

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量82

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/kele196283/article/details/125339680

版权

这篇博客详细介绍了如何使用JavaScript实现一个带有左右箭头控制和小圆点指示器的无缝轮播图。通过监听鼠标进入、离开事件来显示和隐藏控制按钮，并通过点击事件动态调整图片展示和小圆点的状态，同时实现了自动播放功能。

摘要由CSDN通过智能技术生成

< >

```
    </ol>
</div>
```

@LastEditors: 我在睡会儿
@LastEditTime: 2022-06-16 16:05:32
*/
window.addEventListener(‘load’, function () {
//获取元素
var arrow_l = this.document.querySelector(“.arrow-l”)
var arrow_r = this.document.querySelector(“.arrow-r”)
var box = this.document.querySelector(“.box”)
var focusWidth = box.offsetWidth;
//鼠标经过box 就显示隐藏的左右按钮
box.addEventListener(‘mouseenter’, function () {
arrow_l.style.display = “block”;
arrow_r.style.display = “block”;
clearInterval(timer)
timer = null //清楚定时器
});
//鼠标离开就显示隐藏
box.addEventListener(‘mouseleave’, function () {
arrow_l.style.display = “none”;
arrow_r.style.display = “none”;
timer =setInterval(function () {
//手动调用点击事件
arrow_r.click()
}, 2000)
});

//动态生成小圆圈有几张图片我就要生成几个小圆圈
var ul = box.querySelector(“ul”)
var ol = box.querySelector(“ol”)
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement(“li”)
//记录当前小圆圈的索引号通过自定义属性来做
li.setAttribute(‘index’, i)
//把小li插入到ol 里面
ol.appendChild(li)
```
 // 利用排它思想 可以直接在生成小圆圈的时候添加点击事件
 li.addEventListener("click", function () {
     for (var i = 0; i < ol.children.length; i++) {
         ol.children[i].className = ""
     }
     //留下我自己 当前的小li 设置current类名
     this.className = "current"
     //点击小圆圈 移动图片 当然移动的是 ul
     //ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意的负值
     //当我们点击了某个小里 就拿到了当前的小li 的索引号
     var index = this.getAttribute('index')
     //当我们点击了某个小li 就要把这个小li 的索引号给num
     num = index;
     //当我们点击了某个小li 就要把这个小li 的索引号给circle
     circle = index;
     animate(ul, -index * focusWidth)
     // console.log(focusWidth);
 })
```
}
ol.children[0].className = “current”;
//克隆一张图片(li) 放到ul 最后面
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)
//点击右侧按钮图片滚动一张无缝滚动
var num = 0
//circle 控制小圆圈的播放
var circle = 0
//flag 节流阀
var flag = true;
arrow_r.addEventListener(‘click’, function () {
if (flag) {
flag = false
//如果走到了最后复制的一张图片此时我们的ul 要快速的复原 left改为0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++
animate(ul, -num * focusWidth, function () {
flag = true //开启节流阀
})
//点击右侧按钮小圆圈跟随者一起变化可以在声明一个变量控制小圆圈的播放
circle++;
//如果circle == 5 说明走到了最后我们克隆的图片我们就复原
if (circle == ol.children.length) {
circle = 0
}
// //先清除其余小圆圈的current类名
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = “”
// }
// //留下当前的小圆圈的current类名
// ol.children[circle].className = “current”
```
     //调用函数
     circleChange()
 }
```
})

//左侧按钮
arrow_l.addEventListener(‘click’, function () {
if (flag) {
flag = false
//如果走到了最后复制的一张图片此时我们的ul 要快速的复原 left改为0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + “px”;
```
     }
     num--
     animate(ul, -num * focusWidth, function () {
         flag = true
     })
     //点击左按钮 小圆圈跟随者一起变化 可以在声明一个变量控制小圆圈的播放
     circle--;
     //如果circle <0 说明第一张图片 则小圆圈要改为第五个小圆圈(4)
     // if (circle < 0) {
     //     circle = ol.children.length - 1
     // }
     circle = circle < 0 ? ol.children.length - 1 : circle
     //调用函数
     circleChange()
 }
```
})

function circleChange() {
//先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = “”
}
//留下当前的小圆圈的current类名
ol.children[circle].className = “current”
}

//自动播发轮播图
var timer = setInterval(function () {
//手动调用点击事件
arrow_r.click()
}, 2000)
})