原生JS和jQuery实现banner图滚动那些事

Posted 2020-10-07 0°

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS和jQuery实现banner图滚动那些事相关的知识，希望对你有一定的参考价值。

前言

阿q

　作为一个准前端学员，banner图可是很重要的呢。本人，小白一只，给大家分享几个刚刚学习的基础banner图事件。~~~

1. 小广告图滚动播放

1.1html代码

首先，创建基本结构

        <div id="outside">
            <div id="inside">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </div>

1.2设置基本样式

来一段css代码，做出来基本样式

            *{
                margin: 0px;
                padding: 0px;
            }
            #outside{
                width: 1200px;
                overflow: hidden;
                margin: 0 auto;
                height: 300px;
                position: relative;
            }
            
            #outside #inside{
                width: 3100px;
                position: absolute;
            }
            
            #outside #inside div{
                width: 300px;
                height: 300px;
                margin: 0px 5px;
                background-color: red;
                float: left;
            }

1.3实现滚动

基本样式已经做好，接下来就是让它滚动了~~~很简单的一段JS代码，我是用定时器做的

    <script type="text/javascript">
        var num = 1;
        setInterval(function() {
            num--;
                var inside=document.getElementById("inside");
                inside.style.cssText="left: "+num+"px;";
            if(num<=-1860) num=1;
        },5);
    </script>

呐~，这就是效果图了，放上图片食用更佳。以前用纯css做过一遍，学过JS之后发现还是JS更简单

2. 自定义插件实现banner图滚动

接下来就是大图了，这是自己定义的jQuery插件

2.1HTML文件代码

这个插件的主要代码写在自定义JS文件中，HTML中代码就很少了~

    <head>
        <meta charset="UTF-8">
        <title>自定义插件实现banner滚动</title>
        <script src="js/jquery-3.1.1.js" type="text/javascript"></script>
        <script src="js/jQuery-scrollBanner.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="banner"></div>
        
    </body>
    
    <script type="text/javascript">
        $("#banner").scrollBanner({
            images:[
                {src:"img/banner1.jpg",title:"banner1",href:"http://www.baidu.com"},
                {src:"img/banner2.jpg",title:"banner2",href:"http://www.sina.com"},
                {src:"img/banner3.jpg",title:"banner3",href:"http://www.qq.com"},
                {src:"img/banner4.jpg",title:"banner4",href:"http://www.jredu100.com"}],
            scrollTime:2000,
            bannerHeight:"500px",
            iconColor:"#cccccc",
            iconHoverColor:"#82c900",
            iconPosition:"center"
        });
    </script>

没错，只定义一个div，就是这么任性

2.2插件属性

images : 接收数组类型，数组的每个值应为对象。对象具有属性：src->图片的路径
title->图片指上后的文字 href->点击图片跳转的页面
scrollTime : 每张图片停留时间，单位毫秒。2000
bannerHeight : banner图的高度。500px

iconColor : 提示图标的颜色。默认white
iconHoverColor : 提示图标指上之后的颜色。默认orange
iconPosition : 提示图标的位置，可选值left/center/right。默认center

2.2插件代码

啦啦啦~~接下来就是插件的代码了，注释写在代码里了

!function($){
    $.fn.scrollBanner = function(obj){
        // 声明各个属性的默认值
        var defaults={
            images:[],
            scrollTime:2000,
            bannerHeight:"500px",
            iconColor:"white",
            iconHoverColor:"orange",
            iconPosition:"center"
        }
        // 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性
        obj=$.extend(defaults,obj);
        
        // 组件DOM布局
        $("body").css({"padding":"0px","margin":"0px"});
        
        this.empty().append("<div class=\'scrollBanner-banner\'></div>");
        $.each(obj.images,function(index,item){
            $(".scrollBanner-banner").append("<div class=\'scrollBanner-bannerInner\'><a href=\'"
            +item.href+"\' target=\'_black\'><img src=\'"+item.src+"\' title=\'"+item.title
            +"\'/></a></div>");
        });
        $(".scrollBanner-banner").append("<div class=\'scrollBanner-bannerInner\'><a href=\'"
        +obj.images[0].href+"\' target=\'_black\'><img src=\'"+obj.images[0].src+"\' title=\'"
        +obj.images[0].title+"\'/></a></div>");
        
        this.append("<div class=\'scrollBanner-icons\'></div>");
        $.each(obj.images, function(index,item) {
            // data-*属性是H5允许用户自行在HTML标签上保存数据的属性。
            // 保存在data-*中的数据，可以使用JS读取调用。
            $(".scrollBanner-icons").append("<span data-index=\'"+index
            +"\' class=\'scrollBanner-icon\'></span>");
        });
        
        // 设置各种css
        this.css({
            "width":"100%",
            "height":obj.bannerHeight,
            "overflow":"hidden",
            "position":"relative"
        });
        $(".scrollBanner-banner").css({
            "width": obj.images.length+1+"00%",
            "height":obj.bannerHeight,
        });
        $(".scrollBanner-bannerInner").css({
            "width":100/(obj.images.length+1)+"%",
            "height":obj.bannerHeight,
            "overflow":"hidden",
            "float":"left"
        });
        $(".scrollBanner-bannerInner img").css({
            "width": "1920px",
            "height": obj.bannerHeight,
            "position": "relative",
            "left": "50%",
            "margin-left": "-960px",
        });
        
        $(".scrollBanner-icons").css({
            "width": 30*obj.images.length+"px",
            "height": "7px",
            "position":"absolute",
            "bottom":"40px",
        });
        
        switch (obj.iconPosition){
            case "left":
                $(".scrollBanner-icons").css({
                    "left":"40px",
                });
                break;
            case "center":
                $(".scrollBanner-icons").css({
                    "left":"50%",
                    "margin-left":"-"+15*obj.images.length+"px"
                });
                break;
            case "right":
                $(".scrollBanner-icons").css({
                    "right":"40px",
                });
                break;
        }
        
        $(".scrollBanner-icon").css({
            "width": "20px",
            "height": "7px",
            "background-color": obj.iconColor,
            "display": "inline-block",
            "margin": "0px 5px",
        });
        $(".scrollBanner-icon:eq(0)").css({
            "background-color":obj.iconHoverColor
        });
        
        // 实现banner滚动功能
        var count=1;
        setInterval(function(){
            $(".scrollBanner-banner").css({
                "margin-left":"-"+count+"00%",
                "transition":"all .5s ease"
            });
            $(".scrollBanner-icon").css("background-color", obj.iconColor);
            $(".scrollBanner-icon:eq("+count+")").css("background-color", obj.iconHoverColor);
            
            if (count>=obj.images.length){
                $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
            }
            
            if (count>obj.images.length) {
                count=0;
                $(".scrollBanner-banner").css({
                    "margin-left":"0px",
                    "transition":"none"
                });
            }
            count++;
        },obj.scrollTime);
        
        // 小图标指上后变色并且切换banner图
        $(".scrollBanner-icon").mouseover(function(){
            $(".scrollBanner-icon").css("background-color", obj.iconColor);
            // ↓ 由span触发mouseover事件，则this指向这个span。
            // ↓ 但是，这个this是JS对象，必须使用$封装成JQuery对象。
            $(this).css("background-color", obj.iconHoverColor);
            
            var index=$(this).attr("data-index");
            // 将计数器count修改为index的值，让Banner滚动的定时器能够刚好滚到所指图片的下一张
            count=index;
            $(".scrollBanner-banner").css({
                "margin-left":"-"+index+"00%",
                "transition":"none"
            });
        });
    }
}(jQuery);

怎么样，是不是很方便呢，接下来只要插入想要的图片就可以了

3. 手风琴banner图

如果上一个很普通，食用起来没什么味道的话，接下来给客官分享一道比较成熟的菜。
这个样式我很喜欢玩的游戏的官网的一个版块，果然游戏使人进步呢~~
这也是用jQuery实现的，jQuery果然是个神奇的东西~~

闲话不多说，上菜~~~

3.1DOM组建

方便起见，我们将HTML代码和css代码写到一块，这个虽然好看，但是不如上边那个使用方便

    <style>
        *{margin:0; padding:0;}
        body,html{width:100%; height:100%;}
        .bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .bg-box-1{
            background: url(\'img/tu1.jpg\') no-repeat center/cover;
        }
        .bg-box-2{
            background: url(\'img/tu2.jpg\') no-repeat center/cover;
        }
        .bg-box-3{
            background: url(\'img/tu3.jpg\') no-repeat center/cover;
        }
        .bg-box-4{
            background: url(\'img/tu4.jpg\') no-repeat center/cover;
        }
        #wrap{
            position: absolute;
            overflow: hidden;
            top:0; left:0; right:0; bottom:0;
            margin:auto;
            width: 1000px;
            height: 400px;
        }
        #wrap > ul{
            width: 120%;
            list-style: none;
        }
        #wrap > ul > li{
            float: left;
            width: 100px;
            height: 400px;
            cursor: pointer;
        }
        #wrap > ul > li:nth-child(1){
            background: url(\'img/tu5.jpg\') no-repeat center/cover;
        }
        #wrap > ul > li:nth-child(2){
            background: url(\'img/tu1.jpg\') no-repeat center/cover;
        }
        #wrap > ul > li:nth-child(3){
            background: url(\'img/tu2.jpg\') no-repeat center/cover;
        }
        #wrap > ul > li:nth-child(4){
            background: url(\'img/tu3.jpg\') no-repeat center/cover;
            width: 700px;
        }    
        #wrap > ul > li > .text{
            width: 100px;
            height: 100%;
            background: #000;
            opacity: .5;
        }
        #wrap > ul > li > .text p{
            padding: 20px 40px;
            font-family: \'Microsoft yahei\';
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="bg bg-box-1"></div>
    <div class="bg bg-box-2"></div>
    <div class="bg bg-box-3"></div>
    <div class="bg bg-box-4"></div>
    <div id="wrap">
        <ul>
            <li>
                <div class="text">
                    <p>剑灵1</p>
                </div>
            </li>
            <li>
                <div class="text">
                    <p>剑灵2</p>
                </div>
            </li>
            <li>
                <div class="text">
                    <p>剑灵3</p>
                </div>
            </li>
            <li class="curr">
                <div class="text">
                    <p>剑灵4</p>
                </div>
            </li>
        </ul>
    </div>
</body>

3.2jQuery实现功能

    <script src="js/jquery.min.js"></script>
    <script>
    (function(){
        $(\'#wrap li\').mouseover(function(){
            if(!$(this).hasClass(\'curr\')){
                $(\'#wrap li\').removeClass(\'curr\');
                $(this).addClass(\'curr\');

                // 切换背景
                $(\'#wrap li\').each(function(index){
                    if($(this).hasClass(\'curr\')){
                        $(\'.bg\').fadeOut(300);
                        $(\'.bg:eq(\' + index + \')\').fadeIn(500);
                    }
                });

                $(\'.curr\').stop().animate({
                    width: 700
                }, 500, \'linear\');
                $(\'#wrap li\').not(\'.curr\').stop().animate({
                    width: 100
                }, 500, \'linear\');
            }
        });
    })()
    </script>

学过之后没用过hasclss()方法，结果在这用到了。“存在即合理”，还是自己才疏学浅。

效果图：

小q有话说

小q还是个新人，东西还有很多不足。我会继续努力，将不足之处抹去的，毕竟咱也是个有强迫症的人╭(╯^╰)╮

以上是关于原生JS和jQuery实现banner图滚动那些事的主要内容，如果未能解决你的问题，请参考以下文章

原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等

利用原生JS实现网页1920banner图滚动效果