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>