sql語句中(+)的作用
阿新 • • 發佈：2020-09-19
這裡使用勻速動畫方法實現輪播效果
js部分
實現無縫輪播效果
1、在圖片盒子最前面放入最後一張圖片，在圖片盒子最後面放入第一張圖片，這樣顯示的圖片下標第一張為1最後一張0；
2、當點選第一張時，顯示的是最後一張，也就是圖片index的下標改變
3、點選最後一張的效果與點選第一張的差不多，唯獨改變了下標
看上去第一張點選時就平滑向前移動到最後一張，實際上在一瞬間回到第一張，這樣就實現了無縫輪播的效果
<style> ul, ol { margin: 0; padding: 0; list-style: none; } #box { position: relative; margin: 100px auto; width: 510px; height: 210px; border: 1px solid; } .screen { position: relative; width: 500px; height: 200px; margin: 5px; overflow: hidden; }/* 圖片盒子 */ .screen ul { position: absolute; left: -500px; top: 0; width: 3500px; } .screen ul li { float: left; } /* 圖片下標盒子 */ .screen ol { position: absolute; bottom: 10px; right: 10px; height: 30px; } .screen ol li {float: left; width: 20px; height: 20px; margin-left: 10px; background-color: #fff; text-align: center; color: #000; cursor: pointer; } .screen ol .current { background-color: aqua; color: #fff; } .left, .right { display: none; position: absolute; top: 70px; width: 30px; height: 60px; line-height: 60px; text-align: center; background-color: #000; font-family: "simsun", "宋體"; font-weight: 700; font-size: 30px; color: #fff; opacity: .3; cursor: pointer; } .left { left: 5px; } .right { right: 5px; } #box:hover .left, #box:hover .right { display: block; } .left:hover, .right:hover { opacity: .5; } img { width: 500px; height: 200px; overflow: hidden; } </style> </head> <body> <div id="box"> <div class="screen"> <ul> <li><img src="./img/timg (5).jpg" alt=""></li> <li><img src="./img/timg (1).jpg" alt=""></li> <li><img src="./img/timg(2).jpg" alt=""></li> <li><img src="./img/timg (3).jpg" alt=""></li> <li><img src="./img/timg (4).jpg" alt=""></li> <li><img src="./img/timg (5).jpg" alt=""></li> <li><img src="./img/timg (1).jpg" alt=""></li> </ul> <ol> <li data-index="0" class="current">1</li> <li data-index="1">2</li> <li data-index="2">3</li> <li data-index="3">4</li> <li data-index="4">5</li> </ol> </div> <div class="left"><</div> <div class="right">></div> </div> <script src="animation.js"></script> <script> // 獲取元素 var box = document.getElementById("box"); // 外層大盒子 var screen = document.getElementsByClassName("screen")[0]; var ul = screen.children[0]; // 圖片盒子 var ol = screen.children[1]; // 圖片下標盒子 var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; var timeID = null; // 定時器id var index = 1; // 顯示的第一張圖片下標變數 // 註冊事件 function goPre() { // 判斷是第一張 回到最後一張 if (index == 0) { ul.style.left = -(ul.children.length - 2) * screen.offsetWidth + "px"; index = ul.children.length - 2; } // 索引-- index--; // 圖片動畫 Animation(ul, -index * screen.offsetWidth); // 顯示下標 showIndex(); } function goNext() { // 判斷是最後一張 回到第一張 if (index == ul.children.length - 1) { ul.style.left = "-500px"; index = 1; } // 索引++ index++; // 圖片運動動畫 Animation(ul, -index * screen.offsetWidth); // 顯示下標 showIndex(); } // 滑鼠點選下一頁 right.onclick = function() { goNext() }; // 滑鼠點選上一頁 left.onclick = function() { goPre() }; // 顯示下標方法 function showIndex() { // 設定頁碼背景顏色 (第一張下標為1) for (let i = 0; i < ol.children.length; i++) { if ((index - 1) == i) { ol.children[i].className = "current"; } else { ol.children[i].className = ""; } } // 第0張和最後一張特殊設定 if (index == 0) { // 顯示最後一張 ol.children[ol.children.length - 1].className = "current"; } else if (index == ul.children.length - 1) { // 顯示第一張 ol.children[0].className = "current"; } } // 點選下標顯示對應圖片 for (let i = 0; i < ol.children.length; i++) { ol.children[i].onclick = function() { Animation(ul, -(i + 1) * screen.offsetWidth); index = (i + 1); showIndex(); } } // 定時輪播方法 function startLB() { timeID = setInterval(function() { goNext(); }, 2000); } function stopLB() { clearInterval(timeID); } // 開始輪播 startLB(); // 滑鼠移入停止輪播 box.onmouseenter = function() { stopLB(); } // 滑鼠移除繼續輪播 box.onmouseleave = function() { startLB(); }
效果圖
最後一張向第一張平滑