模仿淘宝,拍拍图片效果

一款居于jquery基础上的模仿淘宝,拍拍购物网站焦点图展示效果。

拍拍效果

模仿拍拍图片展示效果

淘宝效果

模仿淘宝图片展示效果

【参数说明】

   scrollcontrol:滚动的容器(元素id) .
   width:横向滚动一屏的距离;
   height:纵向滚动一屏的距离;
   isLR:标识横向滚动or纵向滚动(lr|tb)
   mode:滚动模式(slow[减速]|fast[加速]|stand[恒速])
   freq:setInterval的第二个参数,设置该参数控置移动时的频率.
   rv:与mode协同工作.能够影响滚动速度,不同的mode,设置rv的意义不一样,可不用设置.
   auto:标识是否自动滚动
   autotime:自动滚动间隔,毫秒为单为,默认值3000
   defindex:第一次显示焦点图的索引号,默认0
   smallbtn:一个(元素)数组:[btn1,btn2,btn3],用来切换不同的页
   cls:(string或function),如果是string,鼠标经过smallbtn中按钮时,会将该字符串做为样式名附加在(鼠标经过的)按钮上.如果是一个function,鼠标经过smallbtn中按钮时,会触发该函数.并且传入两个整型参数(lstIndex,curIndex),提供外围扩展.
   start:一个事件,当开始切换焦点时触发.有两个参数(lstIndex,curIndex)
   stop:一个事件,当结束滚动时触发,与start参数一致.
 

【工作原理】

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

【示例代码】

 结构部份
    

<div class = "center" id = "appliymain"><!--js控置该容器的scrollLeft,scrollTop实现滚动-->
    <div style = "width:9999px" ><!--该部份用来撑足空间-->
        <div class = "content" id = "subcontent">
            <!--滚动内容部份-->
        </div>
    </div>
</div>



 调用代码

slide1({
    length:5
    ,scrollcontrol:"paipaimain"
    ,width:470
    ,height:205
    ,isLR:"lr"
    ,cls:"hover"
    ,mode:"slow"
    ,rv:1
    ,freq:15
    ,smallbtn:$(".paipai .nav li").get()
})


来源:http://www.cnblogs.com/a_bu/


分类:js图片特效 下载地址
阅读(355)喜欢(0)7.4KB浏览器查看效果 点击下载