jQuery带进度条幻灯片图片轮播特效

使用方法：

引入CSS样式

.demo{width:780px;margin:50px auto 0 auto;}
/* picBoxes */
.picBoxes{position:relative;height:287px;overflow:hidden;}
.introPart{position:absolute;left:0;top:0;display:none;}
/* introNav */
#introNav{position:relative;height:105px;overflow:hidden;margin-top:20px;}
#introNav #playback li{float:left;}
#introNav #playback .pause{display:none;}
#introNav #playback a{display:block;width:20px;height:20px;float:left;margin:0 3px 0 0;text-indent:-9000px;outline:0;background-image:url(images/nav-icons.png);background-repeat:no-repeat;}
#introNav #playback .prev a{background-position:0 0;}
#introNav #playback .play a{background-position:0 -20px;}
#introNav #playback .pause a{background-position:0 -60px;}
#introNav #playback .next a{background-position:0 -40px;}
#introNav #playback a:hover{opacity:0.9;}
/* introNav timeline */
#timeline{width:100%;height:15px;position:absolute;top:25px;left:0;overflow:hidden;background:transparent url(images/timeline.png) no-repeat -10px 0;}
#timeline .inside{width:990px;height:100%;position:relative;background:url(images/timeline.png) no-repeat -913px -42px;}
/* introNav nav */
#introNav ul.nav{width:100%;height:40px;position:absolute;top:45px;left:0;margin:0;}
#introNav .nav li{list-style:none;margin:0;position:absolute;top:0;left:0;text-align:center;padding:0;background:none;}
#introNav .nav .p1{left:5px;}
#introNav .nav .p2{left:221px;}
#introNav .nav .p3{left:412px;}
#introNav .nav .p4{left:642px;}
#introNav .nav .p5{left:835px;}
#introNav .nav li a{font-size:14px;color:#6E7577;outline:0;text-decoration:none;}
#introNav .nav li a:hover{color:#525758;}
#introNav .nav li.active a{color:#383C3D;}
#introNav .nav a .point{display:block;width:15px;height:15px;position:absolute;top:-20px;left:0;text-indent:-9000px;outline:0;cursor:pointer;}
#introNav .nav .p1 .point{left:58px;}
#introNav .nav .p2 .point{left:46px;}
#introNav .nav .p3 .point{left:59px;}
#introNav .nav .p4 .point{left:34px;}
#introNav .nav .p5 .point{left:44px;}

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/player.js"></script>

HTML结构

<div class="picBoxes">
    <div id="introb1" class="introPart" style="display:block;"><a href="#"><img src="images/01.jpg" /></a></div>
    <div id="introb2" class="introPart"><a href="#"><img src="images/02.jpg" /></a></div>
    <div id="introb3" class="introPart"><a href="#"><img src="images/03.jpg" /></a></div>
    <div id="introb4" class="introPart"><a href="#"><img src="images/04.jpg" /></a></div>
    <div id="introb5" class="introPart"><a href="#"><img src="images/05.jpg" /></a></div>
</div><!--picBoxes-->
<div id="introNav">
    <ul id="playback">
        <li class="prev"><a href="javascript:void(0);">上一个</a></li>
        <li class="play"><a href="javascript:void(0);">播放</a></li>
        <li class="pause"><a href="javascript:void(0);">暂停</a></li>
        <li class="next"><a href="javascript:void(0);">下一个</a></li>
    </ul>
    <div id="timeline"><div class="inside"></div></div>
    <ul class="nav">
        <li class="p1 active"><a href="javascript:void(0);">进口白色奥迪A4L <span class="point"></span></a></li>
        <li class="p2"><a href="javascript:void(0);">进口黑色奥迪A4L <span class="point"></span></a></li>
        <li class="p3"><a href="javascript:void(0);">进口灰白色奥迪A4L <span class="point"></span></a></li>
        <li class="p4"><a href="javascript:void(0);">进口白色奥迪A4L <span class="point"></span></a></li>			
        <li class="p5"><a href="javascript:void(0);">进口红色奥迪A4L <span class="point"></span></a></li>						
    </ul>
</div><!--introNav end-->