前端轮播插件banner

最新推荐文章于 2023-04-04 15:28:44 发布

xupeng_tan

最新推荐文章于 2023-04-04 15:28:44 发布

阅读量592

点赞数

分类专栏： web前端文章标签： javascript js html

本文链接：https://blog.csdn.net/qq_37291829/article/details/108632139

版权

web前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

写了一个轮播图滑动的动态效果，需要的码友可以来用哦，通过此js脚本可以配置轮播图是由有自动轮播，是否有左右按钮，配置轮播滑动的时长，是否可以通过页码点击来切换轮播图，轮播图页码显示的问题等。

github下载地址：git@github.com:TanxupengSpace/banner.git

<!DOCTYPE html>
<html lang="cn_zh">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="banner.css">
</head>
<body>
    <div class="banner-container">
        <!-- 轮播图 -->
        <ul>
            <li><a href="#"><img src="images/pic1.jpg"/></a></li>
            <li><a href="#"><img src="images/pic2.jpg"/></a></li>
            <li><a href="#"><img src="images/pic3.jpg"/></a></li>
            <li><a href="#"><img src="images/pic4.jpg"/></a></li>
        </ul>
        <!-- 页码 -->
        <div class="banner-pagination">
            <!--<span></span>
            <span class="span-active"></span>
            <span></span>-->
        </div>
        <!-- 左右切换按钮 -->
        <!--<div class="banner-button">
            <div class="prev"></div>
            <div class="next"></div>
        </div>-->
    </div>
</body>
<script type="text/javascript" src="jquery-min-3.5.1.js"></script>
<script type="text/javascript" src="banner.js"></script>
<script type="text/javascript">
    $("ul").banner_slide(); // 调用轮播
</script>
</html>

;(function(){
    $.fn.banner_slide = function(){
        var settings = $.extend({
            auto: true, // 设置自动播放
            loop: true, // 自动循环播放
            playspeed: 3500, // 自动播放倒计时，也就是多长时间之后开始轮播
            slidspeed: 500, // 自动循环轮播时间
            pagination: true, // 是否显示角标
            pagiposition: "center", // 是否居中    left: 左边   center: 右边   right: 右边
            nav: true, // 是否显示切换按钮  true 显示   false 不显示
            paginationclick: true // 是否可以通过页码点击切换轮播图
        });
        this.each(function(){
            var thisObj = $(this),
                banner = thisObj.children(), // 轮播图
                index = 0, // 当前所在轮播图的索引
                len = banner.length - 1; // 轮播的图片总和
            /**
             * 设置打开页面显示的第一张图片
             */
            if(!navigator.userAgent.match(/mobile/i)){ // 当前不是手机
                banner.hide(); // 隐藏所有要轮播的图片
                banner.eq(index).show();
            }else{ // 是移动设备
                banner.css({"opacity": "0"});
                banner.eq(index).css({"opacity": "1"});
            }
            /**
             * 轮播滑动样式
             */
            slideBanner = function(){
                if(!navigator.userAgent.match(/mobile/i)){ // 当前不是手机
                    banner.fadeOut(settings.slidspeed);
                    banner.eq(index).fadeIn(settings.slidspeed);
                }else{ // 是移动设备
                    banner.css({"opacity": "0", "-webkit-transition": settings.slidspeed / 1000 + "s"});
                    banner.eq(index).css({"opacity": "1", "-webkit-transition": settings.slidspeed / 1000 + "s"});
                }
            }
            /**
             * 下一张
             */
            bannerAdd = function(){
                index === len ? index = 0 : index ++;
                slideBanner(); // 滑动轮播图
            }
            /**
             * 上一张
             */
            bannerReduce = function(){
                index === 0 ? index = len : index --;
                slideBanner(); // 滑动轮播图
            }
            /**
             * 生成页面的html元素
             */
            add_pagilable = function(){
                $(".banner-pagination").empty();
                $(".banner-pagination").children().removeClass("span-active");
                for(var i = 0 ; i <= len ; i ++){
                    if(i === index){ // 表示当前所在的轮播图
                        $(".banner-pagination").append("<span class='span-active'></span>");
                        continue;
                    }
                    $(".banner-pagination").append("<span></span>");
                }
                if(settings.paginationclick){ // 可以通过页面来切换轮播
                    $(".banner-pagination").children().each(function(ind){
                        $(".banner-pagination").children().eq(ind).click(function(){
                            index = ind; // 设置页面的位置
                            slideBanner();
                            $(".banner-pagination").children().removeClass("span-active");
                            $(this).addClass("span-active");
                        });
                    });
                }
            }
            /**
             * 显示页码
             */
            if(settings.pagination){
                add_pagilable();
                if(settings.pagiposition === "left"){
                    $(".banner-pagination").css({"text-align" : "left"});
                }
                if(settings.pagiposition === "center"){
                    $(".banner-pagination").css({"text-align" : "center"});
                }
                if(settings.pagiposition === "right"){
                    $(".banner-pagination").css({"text-align" : "right"});
                }
            }
            /**
             * 是否自动播放
             */
            if(settings.auto){ // 是自动播放
                setInterval(function(){
                    bannerAdd();
                    /**
                     * 是否需要页码
                     */
                    if(settings.pagination){
                        add_pagilable();
                    }
                }, settings.playspeed);
            }
            nav_button = function(){
                var nav = '<div class="banner-button">\
                               <div class="prev"></div>\
                               <div class="next"></div>\
                          </div>';
                return nav;
            }
            /**
             * 是否有左右按钮
             */
            if(settings.nav){
                $(".banner-container").append(nav_button());
                $(".prev").click(function(){
                    bannerReduce();
                    add_pagilable();
                });
                $(".next").click(function(){
                    bannerAdd();
                    add_pagilable();
                })
            }
        });
    };
})();

xupeng_tan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端轮播插件banner

写了一个轮播图滑动的动态效果，需要的码友可以来用哦，通过此js脚本可以配置轮播图是由有自动轮播，是否有左右按钮，配置轮播滑动的时长，是否可以通过页码点击来切换轮播图，轮播图页码显示的问题等。github下载地址：[email protected]:TanxupengSpace/banner.git<!DOCTYPE html><html lang="cn_zh"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫