jQuery实现的老虎机跑动效果示例

本文实例讲述了框架实现的老虎机跑动效果。分享给大家供大家参考，具体如下：

老虎机的跑动效果

注意需要自行引用框架库

！DOCTYPE html html head meta charset=' UTF-8 '标题老虎机/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式类型=' text/CSS ' # BigDiv div { height :50 px；宽度：50 pxfloat:left背景色：红色；边距-左侧：5 px可见性：隐藏；} # BigDiv p { margin-left : 10px；}/style/head body div align=' center ' div style=' display : inline-block；'id=bigDiv divp西瓜/p/divp苹果/p/divp香蕉/p/divp橘子/p/divp梨子/p/divp哈密瓜/p/divp草莓/p/divp水蜜桃/p/divp橙子/p/divp谢谢/p/div/div br/br/br/输入类型=' button ' id=' autoBtn '值=' Auto ' onclick=' autoStop()'/div脚本语言=' JavaScript ' var all div=$(' # BigDiv ').find(' div ')；var t；var tCicrl=30 var c=0；函数autoStop(){ var index=11；//11取值范围是大于已有选项项数$(所有分区).每个（函数(i){ if($(this)).css(“”可见性')!=' hidden '){ index=I；} });if(index==11){ index=parsent(9 * math。random())；} $(allDiv).eq(指数)。' CSS('可见','可见');setTimeout(函数(){slotRun(索引));},50);}函数插槽运行(索引){ if(c150){ if($(AllDiv)).eq(指数)。css(“”可见性')!='隐藏'){ $(allDiv).eq(指数)。css(“”可见性','隐藏');if(index==9){//clear time out(t)；$(所有分区).等式(0).' CSS('可见','可见');t=setTimeout(function(){ slot run(0)}，tCicrl)；} else {//清除超时(t)；$(所有分区).eq(指数1)。' CSS('可见','可见');t=setTimeout(function(){ slot run(index)}，tCicrl)；} c；} } else { clear time out(t)；tCicrl=30c=0；} }/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试运行上述代码，可得如下运行结果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery操作DOM节点方法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。