使用jQuery快速高效製作網頁互動特效 第五章 上機練習四 製作廣告圖片輪播切換效果
阿新 • • 發佈：2018-12-21
輪播應有的功能大致都有，分享給一些在學的朋友參考學習。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切換</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.12.4.js"></script> </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> <script type="text/javascript"> $(function () { //記錄當前位置 var index = 0; //顯示左右側按鈕 $(".adver").hover(function () { $(".arrowLeft,.arrowRight").toggle(); }) //左側按鈕 $(".arrowLeft").click(function () { index--; if (index < 0) { index = 5; } $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)"); $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black"); }); //右側按鈕 $(".arrowRight").click(function () { index++; if(index > 5) { index = 0; } $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)"); $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black"); }); //切換圖片 $("ul li").hover(function () { index = $(this).index(); $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)"); $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black"); }); //定時滾動 var runId = ""; function run() { runId = setInterval(function(){ index++; if(index > 5) { index = 0; } $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)"); $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black"); },1000); } run(); //移入暫停和移出恢復定時滾動 $(".adver").mousemove(function () { clearInterval(runId); }).mouseout(function () { run(); }) }) </script> </body> </html>