知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jQuery点击左右滚动产品图片展示代码

    作者:佳明妈 来源:懒人建站 2010-06-21 人气:
    基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动。基于jQuery的产品图文展示jQuery插件stepcarousel.js。

    基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动。动态效果还不错。基于jQuery的产品图文展示jQuery插件stepcarousel.js。

    配置注意下面几处的ID,要与HTML结构中ID对应。
    galleryid: 'mygallery', //id of carousel DIV
    document.getElementById('displaycssbelt').style.visibility="visible";
    document.getElementById('stocklevels').style.visibility="visible";

    配置参看:
    <script type="text/javascript">
    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    panelbehavior: {speed:300, wraparound:false, persist:true},
    autostep: {enable:true, moveby:4, pause:10000},
    defaultbuttons: {enable: true, moveby: 4, leftnav: ['images/butt-left.gif', 0, 64], rightnav: ['images/butt-right.gif', -11, 64]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
    oninit:function(){
    isloaded=true
    document.getElementById('displaycssbelt').style.visibility="visible";
    document.getElementById('stocklevels').style.visibility="visible";
    }
    })
    </script>

     

    ↓ 查看全文

    jQuery点击左右滚动产品图片展示代码由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    jQuery点击左右滚动产品图片展示代码-最新评论