js之轮播再改进

原创 2015年07月10日 15:38:40
<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




纯js轮播图

  • 2017年11月08日 14:01
  • 52B
  • 下载

jQuery轮播图插件mySystem.js

  • 2016年02月15日 11:21
  • 332KB
  • 下载

Jquery和纯JS实现轮播图(二)--淡入淡出切换式

Jquery和纯JS实现轮播图(二)--淡入淡出切换式

myfocuns前端图片轮播JS插件

  • 2017年08月14日 17:34
  • 1.51MB
  • 下载

js 全屏轮播

  • 2017年09月06日 17:58
  • 8.05MB
  • 下载

例子---JS无缝轮播图

DuangDuang,今天我们来一起说说JS实现无缝轮播。没错,顾名思义,就是我们脑子中浮现的类似淘宝主页面中间部分的那个滚动图。这个轮播图的使用频率还是很大的,所以还是很有必要好好研究一下的。 哈...
  • MYTLJP
  • MYTLJP
  • 2017年11月01日 19:25
  • 108

js图片轮播

  • 2017年10月12日 14:44
  • 1.06MB
  • 下载

js图片轮播

  • 2015年12月17日 10:53
  • 2.08MB
  • 下载

js_for循环应用之生成轮播

目的:使用 for循环生成轮播图(如图) 步骤: 获取每个需要的元素 将图片装入数组中,使用数组的下标获取图片 申请变量,通过改变变量,获取数组里面的图...

js实现轮播图

  • 2015年11月24日 23:04
  • 152KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js之轮播再改进
举报原因:
原因补充:

(最多只允许输入30个字)