JS图片自动或者手动滚动效果(支持left或者up)

系统 1775 0

JS图片自动或者手动滚动效果(支持left或者up)

JS图片自动或者手动滚动效果

      在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 貌似说我用招商银行信用卡在今年的6月23日借了招商银行19800元人民币,今天是最后一天没有还款,说我其他银行钱都被冻结了。以后有可能法律投诉我!我靠 我无语啊 我长这么大从来都没有办理过信用卡,我根本就不需要办理信用卡,所以一直以来也没有办过,招商一卡通是有一张 但是从来没有借过钱啊,身份证一直都身上带着!基本上没有脱离过身, 今天我打电话过去 他问我叫什么名字 我就报了名字 我问是什么情况 然后说了很多 大概意思就是刚刚上面的意思 然后他接着问我身份证号是多少?我就没有告诉他, 我今天就半信半疑 我到银行取下钱 看看是不是真的我的卡被冻结了 结果我所有的银行卡都没有被冻结。我怀疑有可能是骗人的,如果有杭州的朋友 可以试试打上面的电话 然后随便报个假名字 让他们查下 看看他们怎么说?就知道了!快过年了 我也在这希望大家不要被一些人骗了,年底小心骗子(骗子很多的)。 不多说了,下面来看看我这个JS效果原理吧!

基本原理

    1.  开始获取每次滚动的个数,如果参数item(int整形数字)传进来,就取参数item个数 否则的话 个数count = 取外层容器宽度(或高度) / 每个li宽度(或高度)。然后判断方向 如果是left(向左) 那么父级容器宽度ul * 2,否则的话ul高度*2. 然后计算下一次滚动多少距离。如果方向是left 那么值的计算 =  ( " l i " , wrap).outerWidth() * _cache.count(也就是当前一个li的宽度*滚动的个数)。如方向是top 那么值的计算 =  ( " l i " , wrap).outerHeight() * _cache.count( 一个li的高度*滚动的个数 )。

   2. 下一页按钮事件的原理:

       默认是auto(自动播放),不断向下一页滚动,_scrollNext函数的原理:如果方向是left 那么marginLeft:动画(animate)移动多少距离。接着回调函数把第一个li插入到最后上面来,且让margin-left:0;接着又执行相应的动作 就是一个循环了。同理 向上滚动也是这个道理。

   3. 上一页按钮事件的原理:

      从后面获取几项元素(根据count个数来获取多少个)。接着判断left或者up方向。接着marginLeft或者marginTop,就这样循环。

   4. 判断传进来的auto参数 如没有传 则默认显示true 自动滚动 否则的 手动滚动。如果是自动的话 调用 setInterval 执行 _scrollNext滚动下一页的方法。

示意图如下:

     JS图片自动或者手动滚动效果(支持left或者up)

jsfiddle的效果如下链接,可以点击进去看看。

  http://jsfiddle.net/longen/3jXFN/embedded/result/

 依赖于HTML结构如下

      <div id="example">

     <div class="scroll">

          <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

          </ul>

     </div>

     <span class="prev">前一个</span>

     <span class="next">下一个</span>

 </div>
    

如果没有上下页的话 上下页按钮可去掉HTML代码。

可配置的参数如下

 targetElem   目标元素 默认为空 需要传入
  direction  'left',     // 默认方向为left 或者自定义 up
 btnPrev  '.prev',    // 上一页按钮
 btnNext  '.next',    // 下一页按钮
 auto  true,       // 默认为true 自动播放
 item  null,       // 一次滚动多少个
 speed  "1000",     // 设置每次滚动动画执行时间(单位毫秒,默认为1000);
 time  "3000",     // 设置每次动画执行间隔时间(单位毫秒,默认为3000);
 callback  null        // 点击上一页或者下一页回调

 HTML代码如下:

  View Code

CSS代码如下:

  View Code

JS代码如下:

  View Code

代码初始化方式分别如下:

  View Code

Demo下载

我所理解的RESTful Web API [Web标准篇]

JS图片自动或者手动滚动效果(支持left或者up)


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论