UDN-企业互联网技术人气社区

板块导航

浏览  : 345
回复  : 3

[原生js] 前端无缝滚动

[复制链接]
cat77的头像 楼主
发表于 2017-1-3 14:59:46 | 显示全部楼层 |阅读模式
  修改图片和jquery 还有对应宽度 即可用

  实际放置图片要比放置图片多一张,当倒数第二张切换到最后一张刚完成的时候,瞬间把,整个ul移到left等于0的位置,接下来我们看到的就是第一张图片到第二张图片的切换,所以就没有了最后一张直接切换到第一张的那种别扭的情况了。

  在线demo地址: 点击进入 zoomsk.github.io
  1. <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>无缝滚动   </title>
  6.               <style>
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             #slide-box{
  12.                 position: relative;
  13.                 overflow-x: hidden;
  14.                 width: 615px;
  15.                 height: 420px;
  16.             }
  17.             ul,li{
  18.                 margin: 0;
  19.                 padding: 0;
  20.             }
  21.             #slide-box>ul{
  22.                 position: relative;
  23.                 width: 3000px;
  24.                 height: 420px;
  25.                 left: -0;

  26.             }
  27.             #slide-box>ul>li{
  28.                 position: absolute;
  29.                 top: 0;

  30.             }
  31.             #slide-box .slide1{
  32.                  left: 0
  33.             }
  34.             #slide-box .slide2{
  35.                  left: 615px;
  36.             }
  37.             #slide-box .slide3{
  38.                  left: 1230px;
  39.             }
  40.             #slide-box .slide4{
  41.                  left: 1845px;
  42.             }
  43.             #slide-box .slide5{
  44.                  left: 2460px;
  45.             }
  46.             #slide-box .slide6{
  47.                  left: 3075px;
  48.             }

  49.         </style>

  50.     </head>
  51.     <body>

  52.         <div id="slide-box">
  53.             <ul>
  54.                 <li class="slide1"><img src="img/nba01.jpg"></li>
  55.                 <li class="slide2"><img src="img/nba02.jpg"></li>
  56.                 <li class="slide3"><img src="img/nba03.jpg"></li>
  57.                 <li class="slide4"><img src="img/nba04.jpg"></li>
  58.                 <li class="slide5"><img src="img/nba05.jpg"></li>
  59.                 <li class="slide6"><img src="img/nba01.jpg"></li>

  60.             </ul>
  61.         </div>

  62.         <script src="js/jquery-mini.js"></script>
  63.         <script>
  64.         $(function(){
  65.             function slideImg(obj,width){//定时轮播无缝滚动
  66.                 var children = obj.children('li').length - 1;

  67.                 setInterval(function(){
  68.                     var left = parseInt(obj.css('left'));

  69.                     if(left<=-width*children){
  70.                         obj.css('left',0);
  71.                         left = -width;
  72.                     }else{
  73.                         left -= width;
  74.                     }
  75.                     left = left+ 'px';
  76.                     obj.animate({left: left});        

  77.                 },2000) ;//每次滚动切换时间

  78.             }

  79.             slideImg($('#slide-box').find('ul'),615); //传入ul和图片宽度  

  80.         })
  81.         </script>
  82.     </body>
  83.     </html>
复制代码

  在线demo地址: 点击进入 zoomsk.github.io

相关帖子

发表于 2017-1-3 15:00:15 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-3 15:00:15 来自手机 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-3 15:00:16 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部