本文實例講述了jQuery實現圖片簡單輪播功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.49028c.com jQuery圖片輪播</title> <style type="text/css"> #frame{ width:700px; height:300px; position:relative; } #img2,#img3{ display:none; } .box{ position:absolute; width:50px; height:50px; line-height:50px; text-align:center; color:white; font-family:Microsoft-Yahei; background:grey; } #move1{ bottom:0; right:100px; } #move2{ bottom:0; right:50px; } #move3{ bottom:0; right:0; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function() { n = 1; interval = setInterval( function(){ $("img").hide(); $("#img"+n).show(); $(".box").css("background","grey"); $("#move"+n).css("background","red"); n = n % 3 + 1; } , 2000 ); $(".box").bind("click",function() { clearInterval(interval); n = $(this).attr("id").slice(4); interval = setInterval( function(){ $("img").hide(); $("#img"+n).show(); $(".box").css("background","grey"); $("#move"+n).css("background","red"); n = n % 3 + 1; } , 2000 ); }); }); </script> </head> <body> <div id="frame"> <div id="photos"> <img id="img1" src="images/background1.png"> <img id="img2" src="images/background2.png"> <img id="img3" src="images/background3.png"> </div> <div class="box" id="move1">1</div> <div class="box" id="move2">2</div> <div class="box" id="move3">3</div> </div> </body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun 測試運行效果（記得替換上述圖片為網絡圖片）
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
