您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > jQuery特效 >

    jQuery多区块点击切换图文特效

    时间:2014-09-01 08:29 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    jQuery多区块点击切换图文特效jQuery多区块点击切换图文特效,适合做点击缩略图切换大图相册特效。jQuery点击切换平滑切换缩略图

    <script language="javascript">
    var cutItm=0;


    function autoPlay(){
    cutItm++;
    if(cutItm>11){
    cutItm=0;
    }
    $(".bd_c4l li").removeClass("bd_cutLi");
    $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
        var leftVal=cutItm*268;
        $(".bd_long").animate({left:-leftVal},500);
    }


    var timeer=setInterval(autoPlay,3000);
    $(".bd_c4l,.bd_c4top").hover(function(){clearInterval(timeer)},function(){timeer=setInterval(autoPlay,3000);});


    $(".bd_c4l li").click(function(){
    cutItm=$(".bd_c4l li").index(this);
    $(".bd_c4l li").removeClass("bd_cutLi");$(this).addClass("bd_cutLi");
    var leftVal=cutItm*268;
        $(".bd_long").animate({left:-leftVal},500);
    });
    $(".bd_lbtn").click(function(){
    cutItm--;
    if(cutItm<0){
    cutItm=11;
    }
    $(".bd_c4l li").removeClass("bd_cutLi");
    $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
        var leftVal=cutItm*268;
        $(".bd_long").animate({left:-leftVal},500);
    });
    $(".bd_rbtn").click(function(){
    cutItm++;
    if(cutItm>11){
    cutItm=0;
    }
    $(".bd_c4l li").removeClass("bd_cutLi");
    $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi");
        var leftVal=cutItm*268;
        $(".bd_long").animate({left:-leftVal},500);
    });
    </script>

    jQuery多区块点击切换图文特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jQuerytexiao/10159.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!