Jquery 廣告圖片輪播切換
阿新 • • 發佈：2019-01-08
要點：
1、滑鼠移至圖片上出現左右箭頭，滑鼠移出圖片時，左右箭頭消失
2、單擊左右箭頭時，顯示上一個/下一個圖片，當前數字背景為橙色，其他數字背景為#333333，第一個/最後一個圖片顯示時，單擊箭頭時繼續顯示輪播圖片
3、定時1秒換一張圖片，輪播出圖片，直到最後一張時換第一張輪播，依次類推。
4、滑鼠移至圖片上，定時就消失；滑鼠移出圖片，定時就開始輪播圖片。
頁面效果如上:
adv.html頁面
<head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切換</title> <link rel="stylesheet" href="css/adv.css"> </head> <body> <div class="adver"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="arrowLeft"><</div> <div class="arrowRight">></div> </div> </body>
adv.css
ul, li { padding: 0; margin: 0; list-style: none; } .adver { margin: 0 auto; width: 590px; overflow: hidden; height: 470px; position: relative; background: url("../images/adver01.jpg"); } ul { position: absolute; bottom: 10px; z-index: 100; width: 100%; text-align: center; } ul li { display: inline-block; font-size: 10px; line-height: 20px; font-family: "微軟雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff; } .arrowLeft, .arrowRight { position: absolute; width: 30px; background: rgba(0, 0, 0, 0.2); height: 40px; line-height: 40px; text-align: center; top: 200px; z-index: 150; font-family: "微軟雅黑"; font-size: 25px; font-weight: bold; cursor: pointer; display: none; color:snow; } .arrowLeft { left: 10px; } .arrowRight { right: 10px; } .bg{ background: orange; }
adv.js
$(function() { //新增第一個樣式 $("li:first").addClass("bg"); //滑鼠移動 adver $(".adver").mouseover(function() { $(".arrowLeft").show(); $(".arrowRight").show(); }). mouseout(function() { $(".arrowLeft").hide(); $(".arrowRight").hide(); }); //圖片陣列 var imgs = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg"); //統計個數 var count = 0; //單擊右 邊的> $(".arrowRight").click(function() { //判斷 if(count == imgs.length - 1) { count=0; } else { count++; //累計 } $(".adver").css("background", "url(images/" + imgs[count] + ")"); //新增圖片 $('li:eq(' + count + ')').addClass("bg"); //新增圓圈背景 $('li:eq(' + count + ')').siblings().removeClass("bg"); //刪除前面的圓圈背景 }); //單擊左邊的> $(".arrowLeft").click(function() { //判斷 if(count == 0) { count=imgs.length - 1; } else { count--; //累計 } $(".adver").css("background", "url(images/" + imgs[count] + ")"); //新增圖片 $('li:eq(' + count + ')').addClass("bg"); //新增圓圈背景 $('li:eq(' + count + ')').siblings().removeClass("bg"); //刪除前面的圓圈背景 }); ////////////////////圖片自動滾動///////////////////////////////// //開啟定時器 var timer = setInterval(function() { if(count == imgs.length - 1) { count=0; //回到起點0 } else { count++; //累計 } $(".adver").css("background", "url(images/" + imgs[count] + ")"); //新增圖片 $('li:eq(' + count + ')').addClass("bg"); //新增圓圈背景 $('li:eq(' + count + ')').siblings().removeClass("bg"); //刪除前面的圓圈背景 }, 1000); //滑鼠移入、移出 $(".adver").hover(function() { clearInterval(timer); //滑鼠移入,定時器關閉 }, function() { //滑鼠移出,開啟定時器 timer = setInterval(function() { if(count == imgs.length - 1) { count=0; //回到起點0 } else { count++; //累計 } $(".adver").css("background", "url(images/" + imgs[count] + ")"); //新增圖片 $('li:eq(' + count + ')').addClass("bg"); //新增圓圈背景 $('li:eq(' + count + ')').siblings().removeClass("bg"); //刪除前面的圓圈背景 }, 1000); }); });