學習筆記--輪播圖
阿新 • • 發佈：2018-12-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; list-style: none; } body { background: orange; } .screen { width: 700px; height: 438px;/*圖片大小*/ margin: 50px auto 0px; overflow: hidden; /*溢位隱藏*/ position: relative; } .screen:hover .leftorright { /*滑鼠移到div中 顯示左右滑動按鈕*/ display: block; cursor: pointer; } .img { width: 400%; /*2.使得ul寬為4倍的img以便於能將4個img橫著排列 */ position: absolute; } .img li { float: left; /*1.設定浮動讓其橫著排列*/ } .num { position: absolute; /*相對於screen進行設定*/ bottom: 10px; width: 100%; height: 15px; text-align: center; /*使得num中的內容居中顯示*/ cursor: default; } .num li { width: 15px; height: 15px; border-radius: 50%; background: #fff; /*li的寬高為15 圓形顯示*/ display: inline-block; /*橫向顯示*/ cursor: pointer; } .num li.on { background: #f40; } .leftorright { display: none; } .leftorright li { position: absolute; width: 50px; height: 50px; top: 40%; /*讓兩個都距離上40%*/ font-size: 30PX; text-align: center; line-height: 50PX; color: #fff; background: rgba(0, 0, 0, 0.1); } .leftorright li:nth-of-type(2) { right: 0px; /*將第二個挪到右邊*/ } </style> </head> <body> <div class="screen"> <ul class="img"> <li> <img src="image/1.jpg" alt=""> </li> <li> <img src="image/2.jpg" alt=""> </li> <li> <img src="image/3.jpg" alt=""> </li> </ul> <ul class="num"> <li class="on"></li> <li></li> <li></li> </ul> <ul class="leftorright"> <li><</li> <li>></li> </ul> <script type="text/javascript"> var i = 0;//計數器 var first = $(".img li").first().clone(); $(".img").append(first); $(".leftorright li:nth-of-type(1)").click(turnLeft); $(".leftorright li:nth-of-type(2)").click(turnRight); //自動輪播 var time = setInterval(turnLeft, 1500); $(".screen").mouseover(function () { clearInterval(time); }); $(".screen").mouseout(function () { time = setInterval(turnRight, 1500); }); $(".num li").mouseenter(function () { i = $(this).index(); if (i == 0 && $(".img").css("left") == -3 * 700 + "px") { //如果當前的是第四張圖片，則不做任何響應 避免發生第一張到第四張的切換 } else { $(".img").css({ left: -i * 700 + "px" }); $(this).addClass("on").siblings().removeClass("on"); } }); function turnLeft() { i++; if (i == 4) { /* 處理邊界跳轉的問題 當移動將要超出邊界時，$(".img")回到起點， 若是直接從第三張跳轉到第一張，會出現不自然的情況 利用視覺延遲，將第一個影象複製到整個影象的最後面（第122行） 當劃到第四張圖片再往後滑動時，$(".img")跳到第一張圖片，並由此向第二張圖片滑動 這樣看上去就好像只有圖片左滑的感覺 具體的變化情況可以通過註釋screen中的溢位隱藏，來觀察 */ $(".img").css({ left: "0px" }); i = 1; } $(".img").animate({ left: -i * 700 + "px" }); //給第i個加上on樣式 並刪除其同級的on樣式 $(".num li").eq(i % 3).addClass("on").siblings().removeClass("on");//i%3當到第四張圖片時顯示第一個點 } function turnRight() { i--; if (i == -1) {//思想同左滑一樣 $(".img").css({ left: -3 * 700 + "px" }); i = 2; } $(".img").animate({ left: -i * 700 + "px" }); $(".num li").eq(i).addClass("on").siblings().removeClass("on"); } </script> </div> </body> </html>