关闭

js之轮播再改进

149人阅读 评论(0) 收藏 举报
分类:
<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




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    最新评论