先放上效果图:

类似于这样的,在列表中循环添加背景样式的跑马灯效果。
准备引入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。

转载于:https://www.cnblogs.com/xiaobeiju/p/10224133.html

JS写一个列表跑马灯效果--基于touchslide.js相关推荐

  1. js html css 图片跑马灯效果(轮播)

    js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...

  2. 分别用Js和vue实现跑马灯效果

    写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...

  3. html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享

    本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...

  4. vue 手写图片左右跑马灯 效果

    效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...

  5. java公告栏js资源_javascript公告栏跑马灯效果代码

    51前端 ul{ list-style:none; margin:0px; padding:0px; width:1500px; float:left; } ul li{ height:25px; l ...

  6. web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)

    本帖最后由 yoin 于 2019-11-21 16:24 编辑 产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...

  7. php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果,想实现一个类似跑马灯的效果, - phpStudy...

    基于jquery实现的文字向上跑动类似跑马灯的效果 想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 恭喜187****5204获得1000RBM 恭喜1 ...

  8. 原生js实现跑马灯效果,鼠标放下可以停止跑动

    js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...

  9. 原生js的图片.文字.小框的跑马灯效果及弹幕效果

    笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...

最新文章

  1. 《数据科学:R语言实现》——2.7 爬取网络数据
  2. 谷歌AI发布“会动的”3D物体数据集,附带标记边界框、相机位姿、稀疏点云,网友:快给我的AR模型用上...
  3. 链栈的建立、判空、入栈、出栈、求长、访顶、清空和销毁
  4. 永洪Desktop关于MAC系统使用问题
  5. Mule学习笔记(二)
  6. 第三章JavaScript 内置对象
  7. About Exception Handling
  8. opengl 关于glGenBuffers函数没有定义
  9. VC++6.0环境下调试c语言代码的方法和步骤_附图
  10. WPF自定义Main函数
  11. 【RTD】AD7793三线式铂电阻PT100/PT1000应用
  12. SeaweedFS安装部署
  13. 修改计算机照片格式怎么修,电脑上如何修改照片文件大小?2种免费方法简单解决...
  14. c#图片转ico自制小工具
  15. ECS实例及阿里云服务器ECS功能组件的说明
  16. 105道Java面试题
  17. 安卓蓝牙操作+蓝牙工具类
  18. ubuntu双系统命令行访问win盘
  19. 那一阙词,早已波澜-仓央嘉措
  20. Hibernate: Duplicate entry for key错误排查

热门文章

  1. 教你32种摄影方式,发挥无限创意
  2. 拉普拉斯算子Laplace
  3. 解决VScode内存占用过大问题
  4. Tbox在整车CAN网络的位置与作用
  5. JS数组转字符串(3种方法)和字符串转数组(2种)
  6. 101页4万字数字孪生能源互联网智慧能源物联网大数据建设方案
  7. OSPF高级特性中-FRR实验
  8. HHTC_学校集训编程题目(11)(组队赛_1)
  9. jvm学习 Shenandoah垃圾收集器
  10. selenium模拟手机浏览器测试