jQuery实现图片简单轮播功能示例
2018-08-13 11:38
1421 查看
本文实例讲述了jQuery实现图片简单轮播功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net 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.jb51.net/code/HtmlJsRun 测试运行效果(记得替换上述图片为网络图片)
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- jQuery实现简单的图片轮播(二)-增加左右(或上下)翻页功能
- jQuery实现的简单图片轮播效果完整示例
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 使用jQuery简单实现产品展示的图片左右滚动功能
- javascript 超简单代码实现图片轮播功能
- 使用javascript,jquery实现的图片轮播功能
- jQuery实现的简单排序功能示例【冒泡排序】
- JS实现的简单图片切换功能示例【测试可用】
- JQuery简单实现图片轮播效果
- jquery实现简单播放图片功能
- jquery实现简单的图片轮播
- jquery图片放大功能简单实现
- 最简单jquery实现带左右箭头和数字焦点的图片轮播
- jQuery实现的图片轮播效果完整示例
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 用jquery面向对象实现的简单的图片轮播,还能学习一下闭包哦
- jQuery实现简单的图片轮播