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




一个轮播图小demo ---之js定时器的妙用

直接上demo  html文件         huadong
  • u012028371
  • u012028371
  • 2016年09月13日 17:04
  • 2193

js实现文字无缝轮播

所用到的知识点: innerHTML 获取或设置某个对象的内容 scrollTop 滚动条滚动的距离,此属性是系统内置定义好的 offsetHeight 获取或设置对象的高度 setInt...
  • weixin_41016545
  • weixin_41016545
  • 2017年11月11日 10:32
  • 230

js之无缝轮播

*{margin:0px;padding:0px;} .banner{overflow:hidden;width:500px;height:300px;margin:100px auto;posit...
  • ElephantBoy
  • ElephantBoy
  • 2016年07月31日 20:14
  • 888

js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播

我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图 下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u01459...
  • u014596302
  • u014596302
  • 2017年03月05日 23:36
  • 533

js公告轮播代码

//首页公告 var $announcement = $('#announcement ul'); var cheight = parseInt($('#announcement').css('l...
  • pangzimin
  • pangzimin
  • 2014年02月13日 17:05
  • 2197

JS原生轮播-基础篇(HTML+CSS)部分

根据慕课网的轮播教程,今早也写了一个,主要是把思路捋清楚,下面的代码我尽全力把每一行解释清楚, 我也是根据我今早写的思路一步一步来,希望能帮到读者! 那么就从最基础的HTML和CSS开始写 ...
  • qq_26626113
  • qq_26626113
  • 2015年07月28日 10:35
  • 1116

用原生JS写无缝轮播

琢磨了几个小时终于写出来了,上代码 这是布局结构 > 这是样式 body,ul,ol{ margin: 0; padding: 0; } l...
  • zzzWhite
  • zzzWhite
  • 2017年02月23日 23:01
  • 1900

Bootstrap学习js插件篇之轮播

案例 下面展示的就是此插件和相关组件制作的轮播案例。
  • a316212802
  • a316212802
  • 2014年05月08日 21:11
  • 20578

js实现图片的无缝轮播滚动

今天学习了一个js实现图片的无缝轮播滚动来和打搅分享一下 大体效果如上图所示:就是4张图片一直在两个按钮之间来回滚动下面介绍一个实现原理。 实现4张图片在两个按钮之间来回滚动假设先向左滚动首先我们通...
  • u012957549
  • u012957549
  • 2017年01月02日 22:57
  • 714

JS原生轮播(JS篇)

接着上一篇,我接下来写关于JS的部分,我会按照我当时的思路一步一步的写,在最后附上全部的代码 一开始我打算写最简单的图片切换功能,怎么写呢?当我们点击左右箭头的时候是用改变left的值,有了思路就很...
  • qq_26626113
  • qq_26626113
  • 2015年07月28日 11:31
  • 5800
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js之轮播再改进
举报原因:
原因补充:

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