发布一款优秀的焦点图组件
2011-04-07
焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离,有兴趣的朋友可以试试。示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同,因此在之前的基础上修改为animation2.js。两图均支持自动切换模式。
【示例1】
【示例2】
【示例3】
无论左右滚动,或者上下滚动,都是通过scrollLeft,scrollTop控置的。因此请确保 scrollcontrol 有足够的滚动空间。
结构部份
<div class = "center" id = "appliymain"><!--js控置该容器的scrollLeft,scrollTop实现滚动--> <div style = "width:9999px" ><!--该部份用来撑足空间--> <div class = "content" id = "subcontent"> <!--滚动内容部份--> </div> </div> </div>
图1,2调用
slide1({
length:5
,scrollcontrol:"paipaimain"
,width:470
,height:205
,isLR:"lr"
,cls:"hover"
,mode:"slow"
,rv:1
,freq:15
,smallbtn:$(".paipai .nav li").get()
})
图3调用
slide2({
scrollcontrol:"appliymain"
,subcontrol:"subcontent"
,width:550
,auto:true
,height:75
,isLR:"lr"
,mode:"slow"
,rv:1
,leftbtn:"applyleft"
,rightbtn:"applyright"
,freq:15
});










