js之轮播再改进

<span style="font-size:18px;">
</span>

.flash{width:680px; height: 280px; margin-top: 20px;}

.flash .banner{width:680px; height: 280px; overflow: hidden; position: relative;}

.flash .banner .solid ul{height: 280px;  position: absolute;}

.flash .banner .solid ul li{width:680px; height: 280px; float: left;}

.flash .banner .solid-num{position: absolute; right: 20px; bottom:10px;}

.flash .banner .solid-num span{display: inline-block; width:20px; height: 5px; margin: 0 6px; background:rgba(255, 255, 255, 0.6); border:1px solid #ccc; cursor: pointer;}

.flash .banner .solid-num .active,.floor-one-left .menu-flash .flash .banner .solid-num span:hover{background:rgba(42, 163, 212, 0.6);}

<div class="flash">
<div class="banner">
<div class="solid" id="shuffling">
<ul>
<li><a href="#"><img src="images/flash1.jpg"/></a></li>
<li><a href="#"><img src="images/flash2.jpg"/></a></li>
<li><a href="#"><img src="images/flash3.jpg"/></a></li>
<li><a href="#"><img src="images/flash4.jpg"/></a></li>
</ul>
</div>
<div class="solid-num" id="shuffling_num">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

</div>

//图片轮播

  var solidWidth = $("#shuffling").width();//图片宽度

  var picLength = $("#shuffling ul li").length;//图片个数

  var picIndex = 0;//图片索引

  var picTimer ; //时间控制

  $("#shuffling ul").css("width",solidWidth * (picLength));

  $("#shuffling_num span").mouseover(function(){

    picIndex = $(this).index();

    showPic(picIndex);

  });

  runPic();

  $("#shuffling").hover(function(){

    clearInterval(picTimer);

  }, function(){

      runPic();

  });

  function runPic()

  {

    picTimer = setInterval(function(){

        picIndex ++;

        if(picIndex == picLength){picIndex = 0;}

        showPic(picIndex);

    }, 3000);

  }

  function showPic(picIndex)

  {

    var nowleft = -picIndex*solidWidth;

    //$("#shuffling ul li").hide("normal").eq(picIndex).show("normal");

    $("#shuffling ul").animate({"left":nowleft},200);//这里刚开始用animate没弄出来，原来是样式表少了一条：.flash .banner .solid ul{height: 280px;  position: absolute;}

    $("#shuffling_num span").removeClass("active").eq(picIndex).addClass("active");

  }

  //图片轮播 end