左按钮有问题 我听不懂老师说的 一会是-- 一会又删掉 一会又++ 一会又是纯数字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <!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> * { margin: 0; padding: 0; } .carousel { position: relative; width: 650px; height: 360px; border: 1px solid #000; margin: 50px auto; overflow: hidden; } .carousel ul { list-style: none; width: 5000px; position: relative; left: 0px; transition: left 0.6s ease 0s; } .carousel ul li { float: left; } .carousel .leftbtn { position: absolute; left: 20px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; background-color: #eee; } .carousel .rightbtn { position: absolute; right: 20px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; background-color: #eee; } </style> </head> <body> <div id= "carousel" class= "carousel" > <ul id= "list" > <li><img src= "./images/beijing0.jpg" alt= "" /></li> <li><img src= "./images/beijing1.jpg" alt= "" /></li> <li><img src= "./images/beijing2.jpg" alt= "" /></li> <li><img src= "./images/beijing3.jpg" alt= "" /></li> <li><img src= "./images/beijing4.jpg" alt= "" /></li> </ul> <a href= "JavaScript:;" class= "leftbtn" id= "leftbtn" ></a> <a href= "JavaScript:;" class= "rightbtn" id= "rightbtn" ></a> <script> // 得到按钮和ul-ul整体进行运动 var leftbtn = document.getElementById( "leftbtn" ); var rightbtn = document.getElementById( "rightbtn" ); var list = document.getElementById( "list" ); var cloneLi = list.firstElementChild.cloneNode( true ); //深克隆 list.appendChild(cloneLi); // 当前ul显示到第几张了,从0开始数 var idx = 0; // 右按钮事件监听 rightbtn.onclick = function () { list.style.transition = "left .6s ease 0s" ; idx++; if (idx > 3) { setTimeout( function () { list.style.transition = "none" ; list.style.left = 0; idx = 0; }, 600); } list.style.left = -idx * 650 + "px" ; }; // 左按钮事件监听 leftbtn.onclick = function () { if (idx == 0) { list.style.transition = "none" ; list.style.left = -5 * 650 + "px" ; setTimeout( function () { list.style.transition = "left .6s ease 0s" ; }, 0); idx = 4; list.style.left = -idx * 650 + "px" ; } }; </script> </div> </body> </html> |
15
收起
正在回答 回答被采纳积分+1
1回答
樱桃小胖子
2022-09-18 15:58:49
同学你好,左右按钮代码中的相关问题如下:
老师帮你给代码写了注释,可以结合注释再理解一下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | < script > // 得到按钮和ul-ul整体进行运动 var leftbtn = document.getElementById("leftbtn"); var rightbtn = document.getElementById("rightbtn"); var list = document.getElementById("list"); var cloneLi = list.firstElementChild.cloneNode(true); //深克隆 list.appendChild(cloneLi); // 当前ul显示到第几张了,从0开始数 var idx = 0; // 右按钮事件监听 rightbtn.onclick = function () { // 上一轮结尾时清除了过渡,所以这里需要重新添加过渡效果 list.style.transition = "left .6s ease 0s"; // 图片自增 idx++; // 设置判断条件 // if (idx > 3) { if (idx > 4) { // 设置一个延时器,延时器的功能:瞬间将ul拉回0的位置,恢复idx初始值0,自动完成以上操作,不需要手动触发 setTimeout(function () { // 取消掉过渡,让图片从克隆来的最后一张“瞬间”回到第一张 list.style.transition = "none"; list.style.left = 0; idx = 0; }, 600); } // 切换下一张图片 list.style.left = -idx * 650 + "px"; }; // 左按钮事件监听 leftbtn.onclick = function () { // 判断是不是第0张,如果是,就要瞬间用克隆的替换真的 if (idx == 0) { // 取消掉过渡,因为要瞬间移动 list.style.transition = "none"; // 直接瞬间移动到最后的克隆的片上 list.style.left = -5 * 650 + "px"; // 设置一个延时器,这个延时器的延时事件可以是0毫秒,功能:瞬间恢复前面取消掉的过渡。 setTimeout(function () { // 加过渡 list.style.transition = "left .6s ease 0s"; // 来到克隆的图片后不做停留,直接过渡到最后一张真图片上,使其看起来的效果就是从第一张到最后一张真图片无缝衔接 idx = 4; list.style.left = -idx * 650 + "px"; }, 0); } else { // 自减 idx--; // 切换下一张图片 list.style.left = -idx * 650 + 'px'; } }; </ script > |
如果还有不懂的,可以具体描述是哪句代码不理解哦,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧