使用 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM