焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离

本文主要是介绍焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【说明】
示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同，因此在之前的基础上修改为animation2.js.两图均支持自动切换模式.

【参数说明】

公共部份:

scrollcontrol:滚动的容器(元素id) .
width:横向滚动一屏的距离;
height:纵向滚动一屏的距离;
isLR:标识横向滚动or纵向滚动(lr|tb)
mode:滚动模式(slow[减速]|fast[加速]|stand[恒速])
freq:setInterval的第二个参数,设置该参数控置移动时的频率.
rv:与mode协同工作.能够影响滚动速度,不同的mode,设置rv的意义不一样，可不用设置.
auto:标识是否自动滚动
autotime:自动滚动间隔,毫秒为单为,默认值3000

animation1.js 其它参数:

defindex:第一次显示焦点图的索引号,默认0

smallbtn:一个(元素)数组:[btn1,btn2,btn3],用来切换不同的页

cls:(string或function),如果是string,鼠标经过smallbtn中按钮时,会将该字符串做为样式名附加在(鼠标经过的)按钮上.如果是一个function,鼠标经过smallbtn中按钮时,会触发该函数.并且传入两个整型参数(lstIndex,curIndex),提供外围扩展.

start:一个事件,当开始切换焦点时触发.有两个参数(lstIndex,curIndex)

stop:一个事件,当结束滚动时触发,与start参数一致.

animation2.js 其它参数:

subcontrol:该容器是滚动内容的父容器,它应该能够反应出滚动内容的真实宽度或高度(元素id) .

leftbtn:控置往左移动的按钮(元素id)

rightbtn:控置往右移动的按钮(元素id)

beforefirst:一个事件，滚动到最左端时触发,有一个布尔类型参数(auto)，标识是自动滚动，还是点击触发.

afterend:一个事件,滚动到最右边触发,参数与beforefirst一致.

【工作原理】

无论左右滚动，或者上下滚动,都是通过scrollLeft,scrollTop控置的.因此请确保 scrollcontrol 有足够的滚动空间.

【示例代码】

结构部份

 view source print ? 
 1<div class = "center" id = "appliymain"><!--js控置该容器的scrollLeft,scrollTop实现滚动--> 
 
 2<div style = "width:9999px" ><!--该部份用来撑足空间--> 
 
 3<div class = "content" id = "subcontent"> 
 
 4<!--滚动内容部份--> 
 
 5</div> 
 
 6</div> 
 
 7</div>

调用代码

 view source print ? 
 1图1,2调用
 

 view source print ? 
 01slide1({ 
 
 02length:5 
 
 03,scrollcontrol:"paipaimain"
 
 04,width:470 
 
 05,height:205 
 
 06,isLR:"lr"
 
 07,cls:"hover"
 
 08,mode:"slow"
 
 09,rv:1 
 
 10,freq:15 
 
 11,smallbtn:$(".paipai .nav li").get() 
 
 12})

 view source print ? 
 1图3调用
 

 view source print ? 
 01slide2({ 
 
 02scrollcontrol:"appliymain"
 
 03,subcontrol:"subcontent"
 
 04,width:550 
 
 05,auto:true
 
 06,height:75 
 
 07,isLR:"lr"
 
 08,mode:"slow"
 
 09,rv:1 
 
 10,leftbtn:"applyleft"
 
 11,rightbtn:"applyright"
 
 12,freq:15 
 
 13});