简单实现jQuery进度条轮播实例代码

本文实例为大家分享了jQuery进度条轮播的具体实现代码，供大家参考，具体内容如下
HTML：

<div class="bannar"><div class="img"><ul><li style="background:url（img/1.jpg）;display:block;"></li><li style="background:url（img/2.jpg）;"></li><li style="background:url（img/3.jpg）;"></li><li style="background:url（img/4.jpg）;"></li></ul></div><div class="text"><ul><li>0</li><li>1</li><li>2</li><li>3</li></ul></div><div class="nav"><ul><li><p></p></li><li><p></p></li><li><p></p></li><li><p></p></li></ul></div></div>

CSS：

<style>*{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;}</style>

Javascript：

<script>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）;}）</script>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。