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。