标签：function 小园 obj 轮播 ul arrow var circle 动态
<!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>
标签：function,小园,obj,轮播,ul,arrow,var,circle,动态 来源： https://www.cnblogs.com/czb1218/p/14665277.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。