jq全阔屏翻滚焦点图实例（兼容所有浏览器）

jq全宽屏翻滚焦点图实例（兼容所有浏览器）
jq全宽屏翻滚焦点图实例（兼容所有浏览器），代码附上，另外底下有整个包可下载，如不想下载整个包，可把代码复制出来，我附上js的包跟图片文件夹。

<script src="js/jquery.js" type="text/javascript"></script>
<style>
* {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    font: 12px/1.6em Helvetica,Arial,sans-serif;
}
a {
    color: #0287CA;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
ul, li {
    list-style: none outside none;
}
img {
    border: medium none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
}
html {
    overflow-x: hidden;
    overflow-y: scroll;
}
#content {
    margin: 0 auto;
}
.ad {
    height: 426px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
width:100%;
}
.slider{
width:100%;
}
.slider, .num {
    position: absolute;
}
.slider li {
    list-style: none outside none;
width:100%;
background-color: #000;
margin-bottom:50px;
}
.slider li p{
width:1200px;
margin:0px auto 50px;
display:inline-block;
}
.slider img {
    display: block;
    height: 376px;
    width: 1200px;
margin:0px auto;
}
.num {
right:46%;
bottom:5px;
width:8%;
text-align:center;
}
.num li {
background:url(images/on02.gif) no-repeat;
font-size:0px;
    cursor: pointer;
    float: left;
    height: 14px;
    line-height: 16px;
    overflow: hidden;
    text-align: center;
width:25%;
text-align:center;
}
.num li.on {
background:url(images/on01.gif) no-repeat;
font-size:0px;
    height: 14px;
width:25%;
}


.b2 ul li{
height:376px;
}
.nr{
overflow:hidden;
height:376px;
}
</style>

<div id="content">
<div style="top: -376px;">
<li style="background:#02395a;"><img src="images/1.jpg" width="1200" height="376" /></li>
            <li style="background:#fff;"><img src="images/2.jpg" width="1200" height="376" /></li>
            <li style="background:#a4c1fd"><img src="images/3.jpg" width="1200" height="376" /></li>
            <li style="background:#d78ec1"><img src="images/4.jpg" width="1200" height="376" /></li>
  </ul>
          <div style="clear:both"></div>
  <ul >
$(function(){
     var len  = $(".num02 > li").length;
  var index = 0;
  var adTimer;
  $(".num02 li").mouseover(function(){
  index  =   $(".num02 li").index(this);
  showImg(index);
  }).eq(0).mouseover();
  //滑入停止动画，滑出开始动画 懒人建站 http://www.51xuediannao.com/
  $('.nr').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 3000);
  }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片 懒人建站 http://www.51xuediannao.com/
function showImg(index){
        var adHeight = $(".nr").height();
  $(".ssl").stop(true,false).animate({top : -adHeight*index},400);
  $(".num02 li").removeClass("on")
   .eq(index).addClass("on");
}
</script>



<script type="text/javascript" >
$(function(){
     var len  = $(".num > li").length;
  var index = 0;
  var adTimer;
  $(".num li").mouseover(function(){
  index  =   $(".num li").index(this);
  showImg(index);
  }).eq(0).mouseover();
  //滑入停止动画，滑出开始动画 懒人建站 http://www.51xuediannao.com/
  $('.ad').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 3000);
  }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片 懒人建站 http://www.51xuediannao.com/
function showImg(index){
        var adHeight = $(".ad").height();
  $(".slider").stop(true,false).animate({top : -adHeight*index},400);
  $(".num li").removeClass("on")
   .eq(index).addClass("on");
}
</script>