js焦点文本滚动效果代码分享

本文阐述了js焦点文本的滚动效果。分享给大家参考。具体如下：效果描述：今天推荐的这个是另一个原生js焦点图，默认自动切换，或者手动切换javascript代码采用函数对象编程，也就是说，Module模式在javascript编程中的基本用法非常简单，主要有三个特点：1。模块化和可重用性；2.封装变量和函数，不接触全局命名空间。不要污染全局变量3。只公开可用的公共方法，所有其他私有方法都是隐藏的，以确保js不会相互冲突。运行渲染：查看效果。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为大家分享的jQuery下拉美化搜索表单效果代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title纯js(不依赖现有框架)焦点文字滚动效果/title style * { margin 33600；划水：0;列表式：无；} #滑块{ overflow:hidden宽度宽度：470像素高度：150 px位置：相对；margin:100px auto} #滑块图片{ width:470px高度高度：150px } #滑块图片li { height:150px宽度width :470 pxfloat : left } # slider # nav { position : absolute；底部：5pxright:5px} #滑块#李导航。nav {背景： # F47500color: # fff} #滑块# nav Li {边框：1 px实心# f 47500color : # d94b 01 cursor :指针指针；背景# ff font-size :12 px；高度：15px宽度：15 pxfloat:left边距-左侧：4 pxdisplay : inline text-align : center }/style/head dy！-代码部分begin-div id=' slider ' ul class=' pics ' liimg alt=' js焦点图效果src=' http : images/01。jpg '/Li Li img alt=' js焦点图效果src=' http : images/02。jpg '/Li Li img alt=' js焦点图效果src=' http : images/03。jpg '/Li Li img alt=' js焦点图效果src=' http : images/04。jpg '/Li Li img alt=' js焦点图效果src=' http : images/05。jpg '/Li/ul ul id=' nav ' Li on mouse over=' setTimeout(function(){ lanren。滑块。pos(0，300)} ' 1/Li on mouse over=' setTimeout(函数(){ lanren。滑块。pos(1)，300)} ' 2/Li on mouse over=' setTimeout(函数(){ lanren。滑块。位置(2)}，300this。l=李。长度；这个。索引=0；if(选项。导航。curclass){这个。nav=H $ $(' Li '，H$(options.navId))，这个。c=选项。curclass}这个。a=选项。auto | | 0；这个。v=选项。垂直| | 0；h $(id)。风格。溢出='隐藏'；h $(id。风格。位置='相对'；ul.style.position='绝对；如果(这个。v){ ul。风格。top=0；this.h=options.height||li[0].偏右；ul。风格。高度=(这个。这个。h)' px '；} else { ul。风格。left=0；this.w=options.width||li[0].在地球之外。风格。width=(这个。这个。w)' px '；} this.pos(options.index||0，this.a？1:0);}，pos:function(pos，a){ clearInterval(this。u . posanimclearInterval(这个。u . auto)；var curPos=this.v？解析int(这。美国风格。top):解析int(这。美国风格。左)，正确Pos=this.v？pos*this.h:pos*this.w，方向=correcposmath。ABS(curPos)？1:-1;正确的位置*=-1；this.index=posif(this。nav){ for(var I=0；ithis.li ){this.nav[i].className=i==pos？这个。c : ' ' } }这个。u . posanim=SetInterval(function(){ lanren zhiga。滑块。anim(正确的pos，方向，a)}，10)；}，anim:function(des，dir，a){ var curPos=this.v？解析int(这。美国风格。top):解析int(这。美国风格。左)；if(CurPoS==des){ ClearInterval(这个。u . posanim如果(a | |这个。a){ lanrenzhiga。滑块。auto()} } else { var v=cur pos-math。天花板(数学。防抱死制动系统(防抱死制动系统)*。07)*目录“px”；这个。v？这个。美国风格。top=v : this。美国风格。左=v；} }，auto :函数(){ this。u . auto=setInterval(function(){ lanren zhiga。滑块。move(1，1)}，this.a*1000) }，move:function(n，a){ var num=this.index n，i=n==1？num==this.l？0:num:num0？这个。l-1:nm；蓝仁阿智。滑块。位置(一，一)；} };}();/scriptscriptlanrenzhija。滑块。init(' slider '，{ auto:3，vertical:1，navId:'nav '，curClass:'nav '，index :0 })；/脚本！-代码部分end/body/html以上就是为大家分享的js(不依赖现有框架)焦点文字滚动效果代码，希望大家可以喜欢。