JS寫一個列表跑馬燈效果--基於touchslide.js
阿新 • • 發佈:2018-12-20
先放上效果圖: 類似於這樣的,在列表中迴圈新增背景樣式的跑馬燈效果。 準備引入JS外掛:
<script type="text/javascript" src="xxx/2017mobile/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="xxx/2017mobile/js/TouchSlide.1.1.js"></script>
然後是頁面佈局,將個小塊做一個div包起來,再單獨用一個div來迴圈樣式,而且給樣式起個名字on,預設在第一個上加上on的樣式名字:
<div class="qw_bzhong" id="qw_bzhong"> <div class="hd"> <ul> <li class="on"><a href="javascript:void(0)" onClick="openZoosUrl();">射精過快</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">勃起困難</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">龜頭敏感</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">無法勃起</a></li> <div class="clear"></div> <li><a href="javascript:void(0)" onClick="openZoosUrl();">龜頭水泡</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">龜頭痘痘</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">尿頻尿急</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">小便刺痛</a></li> <div class="clear"></div> <li><a href="javascript:void(0)" onClick="openZoosUrl();">尿道瘙癢</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">陰囊瘙癢</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">尖銳溼疣</a></li> <li><a href="javascript:void(0)" onClick="openZoosUrl();">陰莖短小</a></li> </ul> <div class="clear"></div> </div> <div class="bd" style="display:none;"> <ul> <li></li> </ul> </div> </div>
樣式佈局依據個人愛好來寫,本人用的flex佈局,所以就不獻醜了。 JS部分: 在引用了Touchslide後,在頁面中該部分內容下寫入即可:
<script type="text/javascript">
TouchSlide({ slideCell:"#qw_bzhong", mainCell:".bd ul", effect:"leftLoop",autoPlay:"true",interTime:"3800" });
</script>
slidecell滑動的部分,maincell滑動的主體內容是ul裡面的li,滑動方向從左開始leftLoop,自動滑動autoplay,間隔時間interTime。