原生JS和jQuery實現banner圖滾動那些事

時間 2019-12-09

標籤原生 jquery 實現 banner 滾動那些欄目 JavaScript 简体版

原文原文鏈接

前言javascript

阿qcss

　做爲一個準前端學員，banner圖但是很重要的呢。本人，小白一隻，給你們分享幾個剛剛學習的基礎banner圖事件。~~~html

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代碼，作出來基本樣式java

            *{
                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代碼，我是用定時器作的jquery

    <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插件app

2.1HTML文件代碼

這個插件的主要代碼寫在自定義JS文件中，HTML中代碼就不多了~ide

    <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>