关注F2E-UED-SEO

Jxwinter's Blog 肖邦的悲伤

jCarousel是一款JQuery 插件, 用来控制水平或垂直排列的列表项. 这些项目(可以是静态HTML内容或是Ajax加载内容)内容是可以来回滚动的(可以有动画效果)。

相关配置文件和一些基本介绍:请点击这里查看
废话不多说,上效果:
Demo:

简单的拿example举例: —-含外部控制的滚动切换

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null   //注意这里不能带标点符号 兼容(IE)
    });
});

这里非常需要注意的一点是:
配置的参数的最后1个不能带有逗号或者是分号!否则IE下是会显示JS报错!从而导致JS失效!

Example里的一些东西都可以经过修改转成各种效果,很实用!
这里提供了打包下载! 欢迎分享!

Tagged with , , .

17 Responses to “Jquery插件jCarousel图片滚动切换(带按钮)”

  1. 减肥 说:

    围观。

  2. DHC 说:

    我去试试看。

  3. wa 说:

    深奥

  4. seoeweb 说:

    您好!想问个问题!不知道是否可以帮忙解决?
    图片滚动代码中如何加入鼠标悬停的功能?

    try{
    var elmaskLengh=$(’slidergoods’).getSize().x;
    itemsWrapLength=elmaskLengh/3;
    $ES(‘#slidergoods .GoodsListWrap .itemsWrap’).setStyle(‘width’,itemsWrapLength);
    $E(‘#slidergoods .GoodsListWrap’).setStyle(‘width’,itemsWrapLength*$ES(‘#slidergoods .GoodsListWrap .itemsWrap’).length+10);
    var sliderSize=0;
    function slidergoodsOnTime(){
    sliderSize=sliderSize-$E(‘#slidergoods .GoodsListWrap .itemsWrap’).getSize().x;
    elmainLengh=$E(‘#slidergoods .GoodsListWrap’).getSize().x;
    overflowLength=elmainLengh-elmaskLengh;
    if(sliderSize>-overflowLength){
    $E(‘#slidergoods .GoodsListWrap’).tween(‘left’, sliderSize);
    }
    else{
    $E(‘#slidergoods .GoodsListWrap’).tween(‘left’, 0);
    sliderSize=0;
    }
    }
    var MyInterval=setInterval(“slidergoodsOnTime()”,3000);
    }catch(e){}

    请问高手如何在以上代码中加入鼠标放在图片上,图片停止滚动,鼠标离开时图片还原继续滚动,本人对SCRIPT不太懂,还望望指教指教。

    在其他地方问过,有人叫我加入这句
    onmousemove=”clearInterval(MyInterval)”
    但我不知道放在哪个位置?我试过放到
    var MyInterval=setInterval(“slidergoodsOnTime()”,3000);
    onmousemove=”clearInterval(MyInterval)”;
    这下面,但没效果,鼠标还是点到图片上图片还是会移动的。
    请问我该如何处理才能做到鼠标放到图片上,图片会停顿,移开鼠标后会还原移动。

  5. 支持下!!去试试

  6. 66918 说:

    顶起。

  7. 不错支持支持

  8. 这个是不是要加什么代码你到百度找一下应该有这样的代码的!

  9. 分享的不错

  10. 左旋肉碱 说:

    分享的不错 收藏了

  11. 淘宝商城 说:

    支持~!!!!

  12. 百度知道 说:

    前来关注

  13. 粉丝淘 说:

    学习了 ~说的不错

  14. 茄子网 说:

    贵博做的很不错,学习了

  15. 商标转让 说:

    我进来学习一下

  16. 商标转让 说:

    顶一下

  17. 商标注册 说:

    支持一下,有空我会常来

Leave a Reply