最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-29 07:01浏览(1729)

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

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

jQuery全屏自适应焦点图轮播插件
分类:图片代码 > 图片轮播 难易:初级
查看演示

加我微信,拉你进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");
    })
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/904.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2