JS寫一個最簡單的無縫輪播圖
阿新 • • 發佈：2018-11-19
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } li { cursor: pointer; } img { vertical-align: middle; } .box { width: 480px; height: 300px; border: 1px solid gray; padding: 3px; margin: 100px auto; } .box .photo { height: 100%; position: relative; overflow: hidden; } .box .photo ul.lunbo { width: 1000%; height: 100%; position: absolute; } .box .photo ul.lunbo li { float: left; } a { display: block; } img { width: 480px; height: 300px; } </style> </head> <body> <div class="box"> <div class="photo" id="photo"> <ul id="lunbo" class="lunbo"> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li> </ul> </div> </div> <script src="js/common.js"></script> <script> function f1(){ //首先定義單位移動的距離 var step=-20; //獲取圖片當前的位置 var now=my$('lunbo').offsetLeft; //每次執行函式當前位置加上單位距離 now+=step; //判斷圖片移動到了什麼位置，如果移到了第七張圖片也就是和第一張相同的那張，則立即變為初始位置，從新開始 //否則設定圖片的位置為now if(now<-2880){ my$('lunbo').style.left=0+'px'; }else { my$('lunbo').style.left = now + 'px'; } } //使用定時器，讓圖片動起來，由於可能會清除定時器，所以這裡不能用匿名函式 var move=setInterval(f1,100); //滑鼠懸浮圖片停止移動，清除定時器 my$('photo').onmouseover=function(){ clearInterval(move); }; //滑鼠移出則繼續移動，開始定時器 my$('photo').onmouseout=function(){ move=setInterval(f1,100); }; </script> </body> </html>
最終效果如下圖片自動播放：
