1、網頁結構如圖所示
2、頁面布局設計細節
①分塊：一個小方塊是一個div。
②無序列表一般是豎直排放的，可以通過float讓其水平排放。float:left;
③三個小方塊是浮動上去的，所以要用到position定位。A盒子要相對B盒子進行移動，那么B盒子就設置為relative，A盒子要設置為absolute。這樣才能讓其進行相對移動。距離的調節，使用top bottom left right 去調節A到合適的位置。如果要垂直居中可以使用{top:50%和margin-top:-A盒子的高度的一半}來調節。
④文字的垂直居中，可以讓line-height屬性的值和盒子一樣高即可。
3、布局代碼
<!DOCTYPE html>
<html>
<head>
<title>Banner.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0;padding:0;}
#banner{width:1226px;height:460px;margin:40px auto;position:relative;}
#banner .pic{width:1226px;height:460px;posion:relative;}
#banner .pic ul li{width:1226px;height:460px;list-style:none;position:absolute;display:none;}
#banner .tab{width:100px;height:10px;position:absolute;bottom:25px;right:25px;}
#banner .tab ul li{list-style:none;width:6px;height:6px;background:#111;border:2px solid #666;
cursor:pointer;border-radius:50%;float:left;margin:0 5px;}
#banner .tab .on{background:#e5e5e5;}
#banner .tab ul li:hover{background:#e5e5e5;}
#banner .btn a{position:absolute;width:40px;height:70px;background:rgba(0,0,0,0);color:#fff;font-size:40px;
text-align:center;line-height:70px;top:50%;margin-top:-35px;text-decoration:none;
}
#left{left:0px;}
#right{right:0px;}
#banner .btn a:hover{background:rgba(0,0,0,0.5);cursor:pointer;}
</style>
</head>
<body>
<div id="banner">
<div class="pic">
<ul>
<li style="display:block"><a href="#"><img src="images/1.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" title="" width="" height=""/></a></li>
</ul>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<a id="left" href="javascript:vid(0);"><</a>
<a id="right" href="javascript:void(0);">></a>
</div>
</div>
</body>
</html>
4、布局效果
5、js實現圖片切換時的淡入淡出效果
①js基本知識：
a、document.getElementsByClassName("class的名字");如果瀏覽器支持這樣獲所有的這個class名字的對象。
b、document.getElementsByClassName("class的名字")[i].getElementsByTagName("標簽的名字");獲取網頁中第i個class下的標簽對象。
②首先是js實現左右耳朵的點擊切換。
用循環去處理，判斷id。
③js實現tab點擊切換。
④切換時的淡入（要顯示）的效果。
⑤切換時的淡出（要消失）的效果
<script>
var oBtn=getClass("btn");
var oPicLi=getClass("pic")[0].getElementsByTagName("li");//獲取div中的li標簽
var oTabLi=getClass("tab")[0].getElementsByTagName("li");//獲取div中的li標簽
var oBtnA=oBtn[0].getElementsByTagName("a");//獲取div中的a標簽對象
var index=0;
for(var i=0;i<oTabLi.length;i++){//根據點擊的tab去切換圖片
oTabLi[i].index=i;//這個地方需要注意，點擊的tab要和圖片index保持一致
oTabLi[i].onclick=function(){//tab按鈕點擊事件
index=this.index;
for(var j=0;j<oTabLi.length;j++){//消除class樣式
oTabLi[j].className="none";
//oPicLi[j].style.display="none";
if(j!=index){
fadeOut(oPicLi[j],1000);
}
}
this.className="on";//oTabLi[index].className="on";
//oPicLi[index].style.display="block";
fadeIn(oPicLi[index],1000);
};
}
for(var i=0;i<oBtnA.length;i++){
oBtnA[i].onclick=function(){//左右耳朵的點擊事件
if(this.id=="right"){//右耳朵點擊事件
index++;
//oPicLi[(index-1)%5].style.display="none";
fadeOut(oPicLi[(index-1)%5],1000);
oTabLi[(index-1)%5].className="none";
oTabLi[index%5].className="on";
//oPicLi[index%5].style.display="block";
fadeIn(oPicLi[index%5],1000);
}else {//左耳朵點擊事件
if(index==0)index=5;
index--;
//oPicLi[(index+1)%5].style.display="none";
fadeOut(oPicLi[(index+1)%5],1000);
oTabLi[(index+1)%5].className="none";
oTabLi[index%5].className="on";
//oPicLi[index%5].style.display="block";
fadeIn(oPicLi[index%5],1000);
}
};
}
function fadeIn(obj,time){//淡入函數 實現time毫秒后顯示，原理是根據透明度來完成的
var startTime=new Date();
obj.style.opacity=0;//設置下初始值透明度
obj.style.display="block";
var timer=setInterval(function(){
var nowTime=new Date();
var prop=(nowTime-startTime)/time;
if(prop>=1){
prop=1;//設置最終系數值
clearInterval(timer);
}
obj.style.opacity=prop;//透明度公式： 初始值+系數*（結束值-初始值）
},13);//每隔13ms執行一次function函數
};
function fadeOut(obj,time){
var startTime=new Date();
obj.style.opacity=1;//設置下初始值透明度
obj.style.display="block";
var timer=setInterval(function(){
var nowTime=new Date();
var prop=(nowTime-startTime)/time;
if(prop>=1){
prop=1;//設置最終系數值
clearInterval(timer);
}
obj.style.opacity=1+prop*(0-1);//透明度公式： 初始值+系數*（結束值-初始值）
},13);//每隔13ms執行一次function函數
};
function getClass(cName){//獲取頁面中所有class為cName的div對象
if(document.getElementsByClassName){//如果瀏覽器支持這樣獲取一個class
return document.getElementsByClassName(cName);
}else {//如果瀏覽器不支持上述訪問
var allE=document.getElementsByTagName("*");//獲取頁面中所有的dom對象
var reg=new RegExp("\\b"+cName+"\\b");
var arr=[];
for(var i=0;i<allE.length;i++){
if(reg.test(allE[i].className)){//如果匹配
arr.push(allE[i]);
}
}
return arr;//返回匹配的所有div對象，因為class不唯一，所以可能會返回多個div
}
};
</script>
6、代碼
<!DOCTYPE html>
<html>
<head>
<title>Banner.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0;padding:0;}
#banner{width:1226px;height:460px;margin:40px auto;position:relative;}
#banner .pic{width:1226px;height:460px;posion:relative;}
#banner .pic ul li{width:1226px;height:460px;list-style:none;position:absolute;display:none;}
#banner .tab{width:100px;height:10px;position:absolute;bottom:25px;right:25px;}
#banner .tab ul li{list-style:none;width:6px;height:6px;background:#111;border:2px solid #666;
cursor:pointer;border-radius:50%;float:left;margin:0 5px;}
#banner .tab .on{background:#e5e5e5;}
#banner .tab ul li:hover{background:#e5e5e5;}
#banner .btn a{position:absolute;width:40px;height:70px;background:rgba(0,0,0,0);color:#fff;font-size:40px;
text-align:center;line-height:70px;top:50%;margin-top:-35px;text-decoration:none;
}
#left{left:0px;}
#right{right:0px;}
#banner .btn a:hover{background:rgba(0,0,0,0.5);cursor:pointer;}
</style>
</head>
<body>
<div id="banner">
<div class="pic">
<ul>
<li style="display:block"><a href="#"><img src="images/1.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" title="" width="" height=""/></a></li>
</ul>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<a id="left" href="javascript:void(0);" ><</a>
<a id="right" href="javascript:void(0);">></a>
</div>
</div>
<script>
var oBtn=getClass("btn");
var oPicLi=getClass("pic")[0].getElementsByTagName("li");//獲取div中的li標簽
var oTabLi=getClass("tab")[0].getElementsByTagName("li");//獲取div中的li標簽
var oBtnA=oBtn[0].getElementsByTagName("a");//獲取div中的a標簽對象
var index=0;
for(var i=0;i<oTabLi.length;i++){//根據點擊的tab去切換圖片
oTabLi[i].index=i;//這個地方需要注意，點擊的tab要和圖片index保持一致
oTabLi[i].onclick=function(){//tab按鈕點擊事件
index=this.index;
for(var j=0;j<oTabLi.length;j++){//消除class樣式
oTabLi[j].className="none";
//oPicLi[j].style.display="none";
if(j!=index){
fadeOut(oPicLi[j],1000);
}
}
this.className="on";//oTabLi[index].className="on";
//oPicLi[index].style.display="block";
fadeIn(oPicLi[index],1000);
};
}
for(var i=0;i<oBtnA.length;i++){
oBtnA[i].onclick=function(){//左右耳朵的點擊事件
if(this.id=="right"){//右耳朵點擊事件
index++;
//oPicLi[(index-1)%5].style.display="none";
fadeOut(oPicLi[(index-1)%5],1000);
oTabLi[(index-1)%5].className="none";
oTabLi[index%5].className="on";
//oPicLi[index%5].style.display="block";
fadeIn(oPicLi[index%5],1000);
}else {//左耳朵點擊事件
if(index==0)index=5;
index--;
//oPicLi[(index+1)%5].style.display="none";
fadeOut(oPicLi[(index+1)%5],1000);
oTabLi[(index+1)%5].className="none";
oTabLi[index%5].className="on";
//oPicLi[index%5].style.display="block";
fadeIn(oPicLi[index%5],1000);
}
};
}
function fadeIn(obj,time){//淡入函數 實現time毫秒后顯示，原理是根據透明度來完成的
var startTime=new Date();
obj.style.opacity=0;//設置下初始值透明度
obj.style.display="block";
var timer=setInterval(function(){
var nowTime=new Date();
var prop=(nowTime-startTime)/time;
if(prop>=1){
prop=1;//設置最終系數值
clearInterval(timer);
}
obj.style.opacity=prop;//透明度公式： 初始值+系數*（結束值-初始值）
},13);//每隔13ms執行一次function函數
};
function fadeOut(obj,time){
var startTime=new Date();
obj.style.opacity=1;//設置下初始值透明度
obj.style.display="block";
var timer=setInterval(function(){
var nowTime=new Date();
var prop=(nowTime-startTime)/time;
if(prop>=1){
prop=1;//設置最終系數值
clearInterval(timer);
}
obj.style.opacity=1+prop*(0-1);//透明度公式： 初始值+系數*（結束值-初始值）
},13);//每隔13ms執行一次function函數
};
function getClass(cName){//獲取頁面中所有class為cName的div對象
if(document.getElementsByClassName){//如果瀏覽器支持這樣獲取一個class
return document.getElementsByClassName(cName);
}else {//如果瀏覽器不支持上述訪問
var allE=document.getElementsByTagName("*");//獲取頁面中所有的dom對象
var reg=new RegExp("\\b"+cName+"\\b");
var arr=[];
for(var i=0;i<allE.length;i++){
if(reg.test(allE[i].className)){//如果匹配
arr.push(allE[i]);
}
}
return arr;//返回匹配的所有div對象，因為class不唯一，所以可能會返回多個div
}
};
</script>
</body>
</html>