zoukankan      html  css  js  c++  java
  • 使用 superslide 实现图片无缝滚动(上下,适用手机端)----引用

    原文链接:https://hacpai.com/article/1538716996849

    参考链接:http://www.superslide2.com/demo.html

    jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true_,effect:"topMarquee",vis:3,interTime:50,trigger:"click"_});

    jQuery(".picMarquee-top"):图片列表外部 div
    mainCell:图片列表
    effect:动画效果
    [v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
    [v2.0] fold:淡入淡出
    [v2.1] slideDown:下拉效果
    vis:visible 缩写,_mainCell 的可视范围个数,当实际内容个数少于可视个数的时候,不执行 SuperSlide 效果。
    interTime:毫秒;自动运行间隔。当 effect 为无缝滚动 (topMarquee/leftMarquee) 时,相当于运行速度。
    trigger:titCell 触发方式 || mouseover:鼠标移过触发;|| click:鼠标点击触发;

    例子(补充)

    html:

     <div class="picMarquee-left">  
        <div class="bd">
          <ul class="picList">
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/180724/190620/1-1Z6201AHD08.jpg" alt="西装定制" /></a></li>
         <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/180724/190620/1-1Z6201G050108.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190620/1-1Z6201F5480-L.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190620/1-1Z6201F3280-L.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190620/1-1Z6201F2330-L.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190620/1-1Z6201A9250-L.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/180724/190620/1-1Z620164JY50.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190627/1-1Z62F95T3201.jpg" alt="西装定制" /></a></li>
            <li><a href="/xizhuang/" title="西装定制"><img src="/uploads/allimg/190625/1-1Z625135400C0.jpg" alt="西装定制" /></a></li>
          </ul>
        </div>
    </div>
    js:
    <script type="text/javascript">
     jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:4,interTime:50});
    </script>
  • 相关阅读:
    喜得千金
    ASP.NET MVC +EasyUI 权限设计(四)角色动作
    SQL Server 2008 远程过程调用失败
    ASP.NET MVC +EasyUI 权限设计(三)基础模块
    ASP.NET MVC +EasyUI 权限设计(二)环境搭建
    ASP.NET MVC +EasyUI 权限设计(一)开篇
    Entity Framework学习笔记(六)----使用Lambda查询Entity Framework(1)
    暂停更新Blog
    Entity Framework学习笔记(五)----Linq查询(2)---贪婪加载
    Exp9 Web安全基础
  • 原文地址:https://www.cnblogs.com/qdkfyym/p/11150601.html
Copyright © 2011-2022 走看看