最终改良动态生成小园圈的动态的无缝衔接的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
color: black;
}
.focus {
width: 721px;
height: 455px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
p {
width: 40px;
height: 40px;
background-color:rgba(90, 90, 60, 0.726);
position: absolute;
margin: auto;
top: 0;
bottom: 0;
text-align: center;
line-height: 50px;
font-weight: bold;
z-index: 2;
border-radius: 0 25px 25px 0;
opacity: 0.4;
color:red;
}
.rp {
right: 0;
border-radius: 25px 0 0 25px ;
}
ul {
width: 60%;
display: flex;
position: absolute;
left: 0;
top: 0;
}
/* ul > li {
width: 500px;
height: 500px;
} */
/* ul > li > a > img {
width: 500px;
height: 500px;
} */
.circle {
position: absolute;
bottom: 0;
left: 0;
display: flex;
}
.circle > li {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
margin-left: 20px;
}
.data {
background-color: #f00;
}
</style>
</head>
<body>
<div class="focus fl">
<div class="box">
<!-- 左侧按钮 -->
<p><a href="javascript:;" class="arrow-l"> ＜ </a></p>
<!-- 右侧按钮 -->
<p class="rp"><a href="javascript:;" class="arrow-r">＞ </a></p>
</div>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="./upload/focus.jpg" alt="" />1</a>
</li>
<li>
<a href="#"><img src="./upload/focus1.jpg" alt="" />2</a>
</li>
<li>
<a href="#"><img src="./upload/focus2.jpg" alt="" />3</a>
</li>
<li>
<a href="#"><img src="./upload/focus3.jpg" alt="" />4</a>
</li>
<!-- <li>
<a href="#"><img src="./images/1-1FP9211339354-lp.jpg" alt="" />1</a>
</li> -->
</ul>
<!-- 小圆圈 -->
<ol class="circle"></ol>
<script>
var focusWidth = focus.offsetWidth;
var arrow_l = document.querySelector(" .arrow-l");
var arrow_r = document.querySelector(" .arrow-r");
var focus = document.querySelector(".focus");
var ol = document.querySelector(".circle");
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("ul li");
//1.鼠标经过显示隐藏左右两边的按钮
focus.addEventListener("mouseover", () => {
console.log(11);
arrow_l.style.display = "block";
arrow_r.style.display = "block";
clearInterval(setTimer);
setTimer = null;
});
//2.鼠标离开隐藏按钮
focus.addEventListener("mouseout", () => {
arrow_l.style.display = "none";
arrow_r.style.display = "none";
setTimer = setInterval(function () {
arrow_r.click();
}, 2000);
});
//3.动态生成小圆圈,动态生成蜂聚图片来生成,
var lis = document.querySelectorAll("ul li");
for (var i = 0; i < lis.length; i++) {
//创建一个小li
var li = document.createElement("li");
//记录小圆圈的属性
li.setAttribute("index", i);
//把小li插入到ol下面
ol.appendChild(li);
//给生成的每一个小li添加鼠标点击事件,干掉所有的颜色,保留自己的颜色
li.addEventListener("click", function () {
//干掉所有人,留下我自己
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = "";
}
this.className = "data";
//4.小圆圈点击的时候,切换图片,移动的时装图片的盒子ul
//ul移动的距离是小圆圈的索引号*当前小LI的宽度,因为方向时反方向需要用负值;
var index = this.getAttribute("index");
//当我们点击小li的时候,获取到li的索引号,把设置小圆圈的索引号给到右侧按钮切换图片张数的变量
count = index;
//当我们点击小li的时候,把获取到的li的索引号,赋值给移动的小圆圈的变量
circle = index;
console.log(index);
var focusWidth = focus.offsetWidth;
console.log(focusWidth);
animate(ul, -index * focusWidth);
});
}
//把ol里面的第一个小圆圈的颜色变成红色,加一个类名data
ol.children[0].className = "data";
//点击小圆圈的时候,给当前的小圆圈加底色,切换底色
//6.克隆第一张图片li放到ul的最后面
const first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7.点击右侧按钮,切换一张图片;
var count = 0;
//设置小圆点的播放
var circle = 0;
//设置一个节流阀
var flag = true;
arrow_r.addEventListener("click", function () {
var focusWidth = focus.offsetWidth;
if (flag) {
flag = false;
if (count == ul.children.length - 1) {
count = 0;
ul.style.left = 0;
}
count++;
animate(ul, -count * focusWidth, function () {
flag = true;
});
//8.设置一个小圆点的变量circle,点击右侧按钮小圆圈也可以跟着一起走
circle++;
//如果走到了第四张以后,说明已经走到了克隆的这张图片了
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
// for(var i=0 ;i<ol.children.length;i++){
// ol.children[i].className='';
// }
// ol.children[circle].className='data'
}
});
//点击左侧按钮切换图片,小圆点跟着一起切换
arrow_l.addEventListener("click", function () {
var focusWidth = focus.offsetWidth;
console.log(focusWidth);
if (flag) {
flag = false;
if (count == 0) {
count = ul.children.length - 1;
ul.style.left = ul.children.length - 1 * focusWidth + "px";
}
count--;
animate(ul, -count * focusWidth,function(){
flag = true ;
});
//8.设置一个小圆点的变量circle,点击右侧按钮小圆圈也可以跟着一起走
circle--;
//如果走到了第1张以后,说明已经走到了克隆的这张图片了
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
// for (var i = 0; i < ol.children.length; i++) {
// ol.children[i].className = "";
// }
// ol.children[circle].className = "data";
circleChange();
}
});
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = "";
}
ol.children[circle].className = "data";
}
//自动播放按钮:
var setTimer = setInterval(function () {
arrow_r.click();
}, 2000);
//盒子移动的动画
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}, 15);
}
</script>
</div>
</body>
</html>
