最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-07-29 07:01浏览(1657)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

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

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2