|
问题描述：
使用marginLeft 来做轮播，实现左右滑动的效果，但是在第一张到最一张时，会经过中间的图片 解决方案： 1. 在头部加上最后一张，在最后一张图片后面，加上第一张图片；从而实现左右滑动的效果 2. 在实现了如最后一张到第一张的过渡后，在无过渡的情况下，变成第一图片显示的位置，从而可以达到的后面的正常滑动 故： 需要用到过渡结束事件transitionend 代码如下： <!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; } .container { width: 980px; height: 330px; overflow: hidden; position: relative; } .imgContainer { font-size: 0; width: 9800px; border: 1px solid red; margin-left: -980px; /* transition: all .3s linear; */ } .imgContainer img { width: 980px; height: 330px; } #prev, #next { position: absolute; width: 50px; height: 50px; background-color: rgba(66, 66, 66, .8); font-size: 18px; color: white; text-align: center; line-height: 50px; top: calc(50% - 25px); } #next { right: 0; } #prev { left: 0; } </style> </head> <body> <!-- emmet 插件 --> <div class="container"> <div class="imgContainer"> <!-- 此处变化 ： 最一张图片添加一张在最前面，第一张图片在最后添加一个 --> <img src="images/8.jpg" alt=""> <img src="images/1.jpg" alt=""><img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""><img src="images/4.jpg" alt=""> <img src="images/5.jpg" alt=""><img src="images/6.jpg" alt=""> <img src="images/7.jpg" alt=""><img src="images/8.jpg" alt=""> <img src="images/1.jpg" alt=""> </div> <div id="prev"> < </div> <div id="next"> > </div> </div> <script type="text/javascript"> let prev = document.getElementById("prev"); let next = document.getElementById("next"); let imgContainer = document.querySelector(".imgContainer"); let index = 1; //显示的第几张 addClick(); // 自动轮播 -》 next function addClick() { next.onclick = Fnnext; prev.onclick = Fnprev; } function Fnnext() { index++; imgContainer.style.transition = "all .3s linear"; imgContainer.style.marginLeft = "-" + (index * 980) + "px"; if (index == 9) { index = 1; imgContainer.addEventListener("transitionend", function () { imgContainer.style.transition = ""; imgContainer.style.marginLeft = "-" + (index * 980) + "px"; }) } } function Fnprev() { index--; imgContainer.style.transition = "all .3s linear"; imgContainer.style.marginLeft = "-" + (index * 980) + "px"; if (index == 0) { //显示在最前面的一张（也是最后的一天图片） index = 8; imgContainer.addEventListener("transitionend", function () { // 以下代码过滤效果完成后执行 ，将图片显示成最一张的位置，取消过滤效果 imgContainer.style.transition = ""; imgContainer.style.marginLeft = "-" + (index * 980) + "px"; }) } } </script> </body> </html> |
|
|
公众号
