简单实现jQuery进度条轮播示例代码
更新时间:2016-06-20 08:57:08 作者:BackgroundColor
本文主要为大家详细介绍了jQuery进度条轮播示例代码的简单实现。 有一定的参考价值。 有兴趣的朋友可以参考一下
本文示例分享了jQuery进度条轮播的具体实现代码,供大家参考。 具体内容如下
HTML:
- 0
- 1
- 2
- 3
CSS:
*{ margin:0 auto; padding:0; } .bannar{ width:100%; height:490px; position:relative; } .img{ width:100%; height:490px; overflow:hidden; } .img ul li{ width:100%; height:490px; list-style-type: none; display:none; } .text{ width:1000px; height:6px; position:absolute; bottom:28px; left:50%; margin-left:-500px; } .nav{ width:1000px; height:10px; position:absolute; bottom:4px; left:50%; margin-left:-500px; } .text ul li{ width:200px; height:100%; float:left; margin-left:38px; list-style-type: none; } .nav ul li{ width:200px; height:10px; float:left; margin-left:38px; list-style-type: none; background:gray; } .nav ul li p{ width:0px; height:100%; background:red; float:left; }
JavaScript:
var i=0; var time_id=null; function auto(){ $(".nav ul li").eq(i).find("p").animate({ "width":"200px" },3900,function(){ i++; $(this).css("width", '0px'); if(i>3){ i=0; } $(".img ul li").eq(i).fadeIn(300).siblings().fadeOut(300); }); } time_id=setInterval("auto()",4000); $(".text ul li").click(function(){ $(".nav ul li").find("p").stop().css("width","0px"); clearInterval(time_id); i=$(this).index(); $(".img ul li").eq(i).fadeIn().siblings().fadeOut(); auto(); time_id=setInterval("auto()",4000); }); $(".nav ul li").click(function(){ $(".nav ul li").find("p").stop().css("width","0px"); clearInterval(time_id); i=$(this).index(); $(".img ul li").eq(i).fadeIn().siblings().fadeOut(); auto(); time_id=setInterval("auto()",4000); })
效果图:
以上就是本文的全部内容。 希望对您的学习有所帮助jquery的进度条jquery的进度条,也希望您多多支持脚本之家。
发表评论