JS 旋轉圖片
阿新 • • 發佈：2018-12-08
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋轉圖片</title> <style> *{ margin: 0; padding: 0; } .block{ width: 1200px; height: 400px; margin: 0 auto; position: relative;; } .slip_img{ width: 500px; height: 250px; position: absolute; transition: all 0.5s linear; } .slip_img img{ width: 100%; height: 100%; } .span_btn{ font-size: 50px; font-weight: 600; color:blue; position: absolute; top: 200px; z-index: 10; } #span_left{ left: 20px; } #span_right{ right: 20px; } .dot_div{ position: absolute; top: 360px; left: 535px; z-index: 10; } .dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid white; margin: 0 3px; } </style> </head> <body> <div class="block"> <div class="slip_img" style="top: 150px;left: 350px;z-index: 6"><img src="../images/pic_1.jpg"></div> <div class="slip_img" style="top: 100px;left: 0;z-index: 5"><img src="../images/pic_2.jpg"></div> <div class="slip_img" style="top: 50px;left: 0;z-index: 4"><img src="../images/pic_3.jpg"></div> <div class="slip_img" style="top: 0;left: 350px;z-index: 3"><img src="../images/pic_4.jpg"></div> <div class="slip_img" style="top: 50px;left: 700px;z-index: 4"><img src="../images/pic_5.jpg"></div> <div class="slip_img" style="top: 100px;left: 700px;z-index: 5"><img src="../images/pic_6.jpg"></div> <!--左右切換圖片按鈕--> <span id="span_left" class="span_btn"><</span> <span id="span_right" class="span_btn">></span> <!--圓點--> <div class="dot_div"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <script> var slip_img=document.getElementsByClassName("slip_img"); var span_left=document.getElementById("span_left"); var span_right=document.getElementById("span_right"); var dot=document.getElementsByClassName("dot"); var count; dot[0].style.backgroundColor="white"; // 圖片切換函式 function slip(way){ // 記錄函式執行時圖片和圓點狀態 var slip_top=[slip_img[0].style.top,slip_img[1].style.top,slip_img[2].style.top,slip_img[3].style.top,slip_img[4].style.top,slip_img[5].style.top]; var slip_left=[slip_img[0].style.left,slip_img[1].style.left,slip_img[2].style.left,slip_img[3].style.left,slip_img[4].style.left,slip_img[5].style.left]; var slip_zindex=[slip_img[0].style.zIndex,slip_img[1].style.zIndex,slip_img[2].style.zIndex,slip_img[3].style.zIndex,slip_img[4].style.zIndex,slip_img[5].style.zIndex]; var dot_bac=[dot[0].style.backgroundColor,dot[1].style.backgroundColor,dot[2].style.backgroundColor,dot[3].style.backgroundColor,dot[4].style.backgroundColor,dot[5].style.backgroundColor] for(var i=0;i<slip_img.length;i++){ //圖片向左轉 if(way=="left"){ if(i>=5){ slip_img[5].style.top=slip_top[0]; slip_img[5].style.left=slip_left[0]; slip_img[5].style.zIndex=slip_zindex[0]; dot[5].style.backgroundColor=dot_bac[0]; } slip_img[i].style.top=slip_top[i+1]; slip_img[i].style.left=slip_left[i+1]; slip_img[i].style.zIndex=slip_zindex[i+1]; dot[i].style.backgroundColor=dot_bac[i+1]; } //圖片向右轉 if(way=="right"){ if(i==0){ slip_img[0].style.top=slip_top[5]; slip_img[0].style.left=slip_left[5]; slip_img[0].style.zIndex=slip_zindex[5]; dot[0].style.backgroundColor=dot_bac[5]; } slip_img[i].style.top=slip_top[i-1]; slip_img[i].style.left=slip_left[i-1]; slip_img[i].style.zIndex=slip_zindex[i-1]; dot[i].style.backgroundColor=dot_bac[i-1]; } } } setInterval(function(){ slip("right"); },3000); //左右按鈕切換 span_left.onclick=function(){ slip("left"); } span_left.onmouseenter=function(){ clearInterval(time); } span_left.onmouseleave=function (){ time=setInterval(function(){ slip("right"); },2000); } span_right.onclick=function(){ slip("right"); } span_right.onmouseenter=function(){ clearInterval(time); } span_right.onmouseleave=function (){ time=setInterval(function(){ slip("right"); },2000); } for(var i=0;i<dot.length;i++){ dot[i].index=i; //點選圓點切換圖片 //思路：獲取當前圖片索引值和圓點點選時的索引值，兩者之差決定向左或向右旋轉圖片的次數 dot[i].onclick=function(){ for(var k=0;k<dot.length;k++){ if(dot[k].style.backgroundColor=="white"){ if(this.index>k){ count=this.index-k; for(var a=0;a<count;a++){ slip("right"); } break; //圖片旋轉一定次數後退出迴圈 } if(this.index<k){ count=k-this.index; for(var b=0;b<count;b++){ slip("left"); } break; } } } } } </script> </body> </html>