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。