1. 程式人生 > >JS寫一個列表跑馬燈效果--基於touchslide.js

JS寫一個列表跑馬燈效果--基於touchslide.js

先放上效果圖: 在這裡插入圖片描述 類似於這樣的,在列表中迴圈新增背景樣式的跑馬燈效果。 準備引入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。