当前位置:首页 > 网页特效 > jQuery特效 >

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

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

  • IDC/源码/项目-广告推荐
效果预览 进入下载地址列表

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多区块点击切换图文特效由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-jq/10159.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!

jQuery特效下载排行

最新文章