jQuery全屏自适应焦点图轮播插件

收藏

本文的banner.js是一款原创焦点图轮播插件，方法都是原创，兼容性很好，值得拥有的一款广告图片插件

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

全屏滚动html代码

<div class="banner">
    <div class="b-img">
        <a href="#" style="background:url(images/banner0.jpg) center no-repeat;"></a>
        <a href="#" style="background:url(images/banner1.jpg) center no-repeat;"></a>
        <a href="#" style="background:url(images/banner2.jpg) center no-repeat;"></a>
    </div>
    <div class="b-list"></div>
    <a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a> 
</div>

$(function() {
    var n = 0;
    var imgLength = $(".b-img a").length;
    var ctWidth = imgLength * 100;
    var itemWidth = 1 / imgLength * 100;
    $(".b-img").width(ctWidth + "%");
    $(".b-img a").width(itemWidth + "%");
    $(".b-list").width(imgLength * 30);
    if (imgLength > 1)
    {
        for (var i = 0; i < imgLength; i++)
        {
            var listSpan = $("<span></span>")
            $(".b-list").append(listSpan);
        }
    }
    $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
    $(".bar-right em").click(function() {
        if (n == imgLength - 1)
        {
            var ctPosit = (n + 1) * 100;
            $(".banner").append($(".b-img").clone());
            $(".b-img:last").css("left", "100%");
            $(".b-img:first").animate({"left": "-" + ctPosit + "%"}, 1000);
            $(".b-img:last").animate({"left": "0"}, 1000);
            var setTime0 = setTimeout(function() {
                $(".banner .b-img:first").remove();
            }, 1000);
            n = 0;
            $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
        }
        else
        {
            n++;
            var ctPosit = n * 100;
            $(".b-img").animate({"left": "-" + ctPosit + "%"}, 1000);
            $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
        }
    })
    $(".bar-left em").click(function() {
        if (n == 0)
        {
            var stPosit = imgLength * 100;
            var etPosit = (imgLength - 1) * 100;
            $(".banner").prepend($(".b-img").clone());
            $(".b-img:first").css("left", "-" + stPosit + "%");
            $(".b-img:last").animate({"left": "100%"}, 1000);
            $(".b-img:first").animate({"left": "-" + etPosit + "%"}, 1000);
            var setTime0 = setTimeout(function() {
                $(".banner .b-img:last").remove();
            }, 1000);
            n = imgLength - 1;
            $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
        }
        else
        {
            n--;
            var ctPosit = n * 100;
            $(".b-img").animate({"left": "-" + ctPosit + "%"}, 1000);
            $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
        }
    })
    $(".b-list span").click(function() {
        var lsIndex = $(this).index();
        n = lsIndex;
        var ctPosit = n * 100;
        $(".b-img").animate({"left": "-" + ctPosit + "%"}, 1000);
        $(this).addClass("spcss").siblings("span").removeClass("spcss");
    })
    function rollEnvent() {
        if (n == imgLength - 1)
        {
            var ctPosit = (n + 1) * 100;
            $(".banner").append($(".b-img").clone());
            $(".b-img:last").css("left", "100%");
            $(".b-img:first").animate({"left": "-" + ctPosit + "%"}, 1000);
            $(".b-img:last").animate({"left": "0"}, 1000);
            var setTime0 = setTimeout(function() {
                $(".banner .b-img:first").remove();
            }, 1000);
            n = 0;
            $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
        }
        else
        {
            n++;
            var ctPosit = n * 100;
            $(".b-img").animate({"left": "-" + ctPosit + "%"}, 1000);
            $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
        }
    }
    var slidesetInterval = setInterval(rollEnvent, 4000);
    $(".banner").hover(function() {
        clearInterval(slidesetInterval);
    }, function() {
        slidesetInterval = setInterval(rollEnvent, 4000);
    });
    $(".bar-left").mouseover(function() {
        $(this).css("background", "url(images/arr-bg.png)");
        $(this).find("em").addClass("emcss");
    }).mouseleave(function() {
        $(this).css("background", "none");
        $(this).find("em").removeClass("emcss");
    })
    $(".bar-right").mouseover(function() {
        $(this).css("background", "url(images/arr-bg.png)");
        $(this).find("em").addClass("emcss");
    }).mouseleave(function() {
        $(this).css("background", "none");
        $(this).find("em").removeClass("emcss");
    })
})