Jquery輪播圖

這次的作業是寫一個選項卡，一個輪播圖，我把兩者結合起來寫了一個網站常見的導航欄和選項卡

效果圖如下：

 我用的jquery方式寫的所以在頁面導入jquery的框架　

 接下來是頁面的布局從上往下寫

設置公共樣式：

布局一個大div用列表來布局

1.導航欄列表：

2.輪播圖列表

 3.選項卡列表 （選項卡列表比較長但是結構一樣定義四層li和導航欄四個標題對應）

 5.彈出發圖片框（使用div對div進行定位隱藏）

 下面寫是css樣式（樣式打了注釋就不分層了）：

        *{
                margin: 0px;
                padding: 0px;
                font-size: 18px;
                font-family:"comic sans ms";
            }
            html{cursor: url('img/指針01.png'),auto;position: relative;}
            a{color: #000; text-decoration: none;}
            ul{list-style: none;}
            img{cursor: pointer; border-radius: 7px;}
            .f_div{
                width: 100%;
                height: auto;
           }
           /* 導航欄樣式 */
           .f_ul{
               width: 100%;
               height: 30px;
               background-color: black;
           }
           .f_ul li{
               float: left;
               padding: 2px 40px;
               border-left: 1px solid #737373;
               cursor: pointer;
           }
           .f_ul li a{color: white;}
           .f_ul li:hover,.f_ul li a:hover{
               background-color: #505050;
               color: aqua;
           }
           /* 選項卡樣式 */
           .s_ul{
               position: relative;
               width: 100%;
               height: auto;
               position: relative;
           }
           .s_ul li{
               background-color: #505050;
               position: absolute;
               display: none;
               opacity: 0.9;
           }
           .s_ul li img {
               width: 15%;
               height: 7.375rem;
               margin:10px 5px;
               border: 3px solid white;
           }
        /*   .s_ul li img:hover{
               transform: scale(1.05);
               transition: .5s;
           } */
           .s_ul li img:hover{
               transform:rotate(15deg);
               transition: .5s;
           }
               /* 輪播圖樣式 */
          /* 圖片寬搞，絕對定位，指針小抓手 */
          .t_ul img{
              width: 1100px;
              height: 400px;
              position: absolute;
              cursor: pointer;
             }
             
          /* 用span標簽來裝上一下一張的按鈕 */
         .t_ul>span{
              width: 15px;
              height: 30px;
              background: url(img/arrow.png);
              background-color: #CCCCCC;
              cursor: pointer;
          }
          /* 按鈕懸浮樣式 顏色變換，放大1.15倍*/
         .t_ul>span:hover{
               background-color: #848484;
               /* transform: scale(1.15);
               transition: .5s; */
            }
           /* 上一頁按鈕，絕對定位 旋轉180度 */
          #span1{
              position: absolute;
              top: 180px;
              left: -30px;
              transform: rotate(180deg) scale(1.55);
          }
          #span2{
              position: absolute;
            transform:scale(1.55);
              top: 180px;
              right: -30px;
          }
          .t_ul{
              list-style: none; /* 去掉滾動圖片的小黑點樣式 */
              width: 1100px;   /* 定義寬 */
              margin: auto;     /* 讓圖片居中顯示 */
              position: relative;  /* 設置想對定位 */
              top: 40px;           /* 距離上邊框40px； */
          }
          /* 重新定義一個ul寫四個li來實現小黑點樣式 */
          .dot{
              font-size: 20px;          /* 設置大小 */
              transform: rotate(-90deg); /* 旋轉-90度讓小黑點水平 */
              position: absolute;        /* 絕對定位 */
              left:550px;
              top: 300px;
              color: #464646;
            list-style-type: disc;
          }
          /* 設置第一個小黑點為白色 */
          .banner_btn{
              color: #fff;
          }
         /* 設置大圖片的div位置大小*/
          #bigImg{
              position: absolute;
              width: 687px;
              height: 378px;
              top: 80px;
              left:360px;
              background-color: azure;
              border-radius:7px ;
              display: none;
          }
          /*右上角的x可要可不要*/
          #spanBing{
              position: absolute;
              right: 7px;
              top: 0px;
              font-size: 24px;
              opacity: 0.8;
              z-index: 1;
              cursor: pointer;
          }
          #spanBing:hover{
              background-color: #00FFFF;
              color: white;
          }
         /* 彈出的大圖片樣式*/
          #bigImg img{
              position: relative;
              border: 2px solid white;
            width: 685px;
              height: 376px;
              opacity: 0.9;
          }

在布局的時候可以按照自己的想法布局，個人布局有缺陷 learning......

下面的js代碼代碼也有注釋，用的都是一些常見的事件和屬性

            $(function(){
                /*定三個全局變量 */
               var set = 0;
               var time;
               var len = 4 /* 輪播圖圖片數量     這里也可以獲取輪播圖數量如 $(".t_ul img").length*/
               
               /* 將圖片切換以及小黑點切換封裝成changeimg方法並賦值一個變量a */
               function changeimg(a){
               $(".t_ul>li").eq(a).fadeIn(1000).siblings("li").fadeOut('slow');/* 淡入淡出 */
               $(".dot>li").eq(a).addClass('banner_btn').siblings().removeClass('banner_btn');/* 改變小黑點樣式 */
               }
               
               /* 將定時器封裝成autoplay方法以便調用 */
               function autoplay(){
                  time = setInterval(function(){    /* 將定時器傳給time變量 */
                  set++ ;
                  if(set > len -1 )
                  {
                   set = 0 ;
                  }
                  changeimg(set);  /* 初始化變量a 將set值傳給changeimg方法 */
                 },5000);
               }
               autoplay(); /* 調用定時器方法*/
               
                /* 點擊上一張圖片按鈕停止定時器 */
                $("#span1").click(function(){
                 clearInterval(time) ;   /* 清除定時器 */
                 set-- ;
                 if(set < 0 )    /* 當圖片為第一張時重新給set賦值為len-1 顯示最后一張 */
                 {
                  set = len-1 ;
                 }
                 changeimg(set) ;
                 autoplay() ;
                });
                
                /* 點擊下一張圖片按鈕停止定時器 */
                 $("#span2").click(function(){
                  clearInterval(time) ;
                  set++ ;
                  if(set === len )     /* 當圖片為最后一張時重新給set賦值為0, 顯示第一張張 */
                  {
                   set = 0 ;
                  }
                  changeimg(set);  
                  autoplay() ;
                 });
                 
                /* 點擊小黑點，顯示想對應的圖片 */
                 $(".dot>li").click(function(){
                   clearInterval(time) ;   
                   set = $(this).index() ;  /* 獲取小黑點索引 並賦值給set*/
                   changeimg(set) ;
                   autoplay() ;
                  });
                /*  當鼠標進入輪播圖時清除定時器，移出時啟動定時器 */
                  $(".t_ul>li").hover(function(){clearInterval(time)} , function(){autoplay()});
                  
                //選項卡懸浮出現對應的卡片
                $(".f_ul>li").hover(function(){
                    $(this).addClass(" .s_ul li").siblings("li").removeClass(" .s_ul li");
                    $(".s_ul li").eq($(this).index()).show().siblings("li").hide();
                },function(){
                    $(".s_ul li").eq($(this).index()).hide();
                    /* $(this).removeClass(" .s_ul li"); */
                });
                //防止移出選項卡時對應的大選項卡消失
                $(".s_ul li").hover(function(){
                    var Tab1 = $(this); /* 獲取鼠標懸浮的那個選項卡*/
                    $(".s_ul>li>img").click(function(){   /*點擊事件 ,點擊選項卡里的圖片*/
                          var Tabl1_img = $(this).attr("src");   /*獲取改圖片的src*/
                          $("#newImg").attr("src",Tabl1_img);   /*將Tabl1_img替換彈框發里img的src值*/
                          $("#bigImg").slideDown();             /*顯示彈出框*/
                      $("#bigImg").hover(function(){            /*當鼠標懸浮在彈出框時避免選項卡消失讓選項卡顯現*/
                          Tab1.show();
                      });
                      $("#bigImg,#spanBing").click(function(){  /* 點擊圖片或者彈出框,關閉彈框*/
                         $("#bigImg").slideUp();
                      });
                 });
                    Tab1.show();
                },function(){
                    $(this).hide();
                });
             });

注釋清晰emmmm可能有些話寫的不太明白QAQ努力改進這里有一個鏈接可以參考  https://www.html5tricks.com/demo/pure-js-image-player-menu/index.html

我是參考這個寫的，源碼也可以下載但是解壓的話需要密碼，有需要可以聯系qq2979100039，或者留言私發。