当前位置:首页 > 网页特效 > 图片特效 >

带小圆点的大屏焦点图轮播代码

时间:2014-05-30 08:38 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 带小圆点的大屏焦点图轮播代码,jquery全屏banner幻灯片带有淡入淡出自动轮播切换效果。左右可以铺满整个屏幕,焦点图代码,最底下的小圆点可以控制图片变换,不操作的时候它会自动轮播切换,很大气,漂亮极了。
  • <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"/></script>
    <script type="text/javascript">
    function banner(){
    var bn_id = 0;
    var bn_id2= 1;
    var speed33=5000;
    var qhjg = 1;
    var MyMar33;
    $("#banner .d1").hide();
    $("#banner .d1").eq(0).fadeIn("slow");
    if($("#banner .d1").length>1)
    {
    $("#banner_id li").eq(0).addClass("nuw");
    function Marquee33(){
    bn_id2 = bn_id+1;
    if(bn_id2>$("#banner .d1").length-1)
    {
    bn_id2 = 0;
    }
    $("#banner .d1").eq(bn_id).css("z-index","2");
    $("#banner .d1").eq(bn_id2).css("z-index","1");
    $("#banner .d1").eq(bn_id2).show();
    $("#banner .d1").eq(bn_id).fadeOut("slow");
    $("#banner_id li").removeClass("nuw");
    $("#banner_id li").eq(bn_id2).addClass("nuw");
    bn_id=bn_id2;
    };
    MyMar33=setInterval(Marquee33,speed33);
    $("#banner_id li").click(function(){
    var bn_id3 = $("#banner_id li").index(this);
    if(bn_id3!=bn_id&&qhjg==1)
    {
    qhjg = 0;
    $("#banner .d1").eq(bn_id).css("z-index","2");
    $("#banner .d1").eq(bn_id3).css("z-index","1");
    $("#banner .d1").eq(bn_id3).show();
    $("#banner .d1").eq(bn_id).fadeOut("slow",function(){qhjg = 1;});
    $("#banner_id li").removeClass("nuw");
    $("#banner_id li").eq(bn_id3).addClass("nuw");
    bn_id=bn_id3;
    }
    })
    $("#banner_id").hover(
    function(){
    clearInterval(MyMar33);
    }
    ,
    function(){
    MyMar33=setInterval(Marquee33,speed33);
    }
    )
    }
    else
    {
    $("#banner_id").hide();
    }
    }
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/8134.html

图片特效下载排行

最新文章