這次的作業是寫一個選項卡，一個輪播圖，我把兩者結合起來寫了一個網站常見的導航欄和選項卡
效果圖如下：
我用的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，或者留言私發，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2389.html
標籤：jQuery
上一篇：關于使用jquery的load方法時被加載頁面內部script失效問題的一次探索
下一篇：jquery處理radio示例