本文实例讲述了jQuery实现图片简单轮播功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.VeVB.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程序设计有所帮助。
新闻热点
疑难解答
