<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 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="https://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> <div> <img src="https://www.jb51.net/images/background1.png"> <img src="https://www.jb51.net/images/background2.png"> <img src="https://www.jb51.net/images/background3.png"> </div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具： 测试运行效果（记得替换上述图片为网络图片）
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》