jQuery滑动式带展示时间的图片轮播效果

使用方法：

CSS样式

#box { width: 100%; height: 768px; background: rgba(0,0,0,0.5); position: relative; }
#banner { width: 344px; height: 440px; overflow: hidden; position: relative; margin: 0 auto; top: 36px; }
.pic { width: 3096px; height: 440px; }
.pic li { width: 344px; height: 440px; float: left; }
.pic li img { width: 344px; height: 440px; }
.num { width: 280px; height: 25px; background: rgba(0,0,0,0.8); border-radius: 20px; position: absolute; top: 390px; left: 32px; }
.num li { width: 15px; height: 15px; border: 1px solid white; float: left; border-radius: 50%; margin-left: 12.5px; margin-top: 3px; }
.num li.button { background: white; }
#border { width: 344px; height: 5px; border: 2px solid white; position: absolute; left: -2px; top: 430px; }
#padding { width: 0px; height: 5px; background: green; display: block; }
#box embed { margin-left: 400px; }

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

javaScript结构

window.onload=function(){
var odiv=document.getElementById('border');
var ospan=document.getElementById('padding');
var op=document.getElementsByTagName('p')[0];
var time=10;
var timer=null;
var num=0;
var len = $('.num>li').length;
var index = 0;
var adTimer;
$('.num li').mouseover(function(){
index = $('.num li').index(this);
showImg(index);
}).eq().mouseover();
$('#banner').mouseover(function(){
clearInterval(adTimer);
ospan.style.width='0px';
num=0;
clearInterval(timer);
})
$('#banner').mouseout(function(){
timer=setInterval(function(){
if(num<344)
    { 
 //op.innerHTML=num+'%';
 num=num+1;
 ospan.style.width=ospan.offsetWidth+ 1+ 'px';
    }
 else
    {
 num=0;
 ospan.style.width='0px';
    }
},time)
adTimer = setInterval(function(){
index++;
if(index==len)
   {
   index=0;
   }
   showImg(index);
},3440)
}).trigger('mouseleave')
function showImg(index){
       var adWidth = $('#banner>ul>li:first').width();
       $('.pic').stop(true,false).animate({
          'marginLeft':-adWidth*index+'px'
       })
       $('.num li').removeClass('button').eq(index).addClass('button');
   }
}

HTML结构

<div id="banner">
  <ul class="pic">
    <li><img src="images/z1.jpg"></li>
    <li><img src="images/z2.jpg"></li>
    <li><img src="images/z3.jpg"></li>
    <li><img src="images/z4.jpg"></li>
    <li><img src="images/z5.jpg"></li>
    <li><img src="images/z6.jpg"></li>
    <li><img src="images/z7.jpg"></li>
    <li><img src="images/z8.jpg"></li>
    <li><img src="images/z9.jpg"></li>
  </ul>
  <ul class="num">
    <li class="button"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="border"><span id="padding"></span></div>
  <p></p>
</div>