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>
javascript:vid(0);