前端设计——js实现图片切换的淡入淡出
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="data:images/1.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data: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="data:images/1.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt="" title="" width="" height=""/></a></li>
<li><a href="#"><img src="data: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);
前端设计——js实现图片切换的淡入淡出的更多相关文章
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html 这个可以实现ImageView异步加载 ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- 定时器图片轮播淡入淡出基本功能已实现，正在修改BUG中。。（附图效果和源代码）
用JQ写的源码如下: 实现功能: 1,图片自动按顺序轮播,轮播选中的图片透明度为1,其他为0.1: 2,鼠标停在的图片上透明度为1,其他为0.1: 3,鼠标离开,继续轮播,起始位置为鼠标停在的图片的下 ...
- 【Android Developers Training】 69. 视图切换的淡入淡出效果
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- JS美女图片切换带视觉差
使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...
- js手风琴图片切换实现原理及函数分析
关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...
- js 插入图片切换，innerHTML
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 【stack】模拟网页浏览 poj 1028
#include<stdio.h> #include<string.h> int main() { ][]; ]; int i,depth; strcpy(s[]," ...
- layer属性
键: 值 描述 下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格.如是调用: $.layer({键: 值, 键: 值, -}); type: 0 层的类型.0:信息框(默 ...
- OPenGL中的缓冲区对象
引自:http://blog.csdn.net/mzyang272/article/details/7655464 在许多OpenGL操作中,我们都向OpenGL发送一大块数据,例如向它传递需要处理的 ...
- acm课程练习2--1005
题目描述 Mr. West bought a new car! So he is travelling around the city.One day he comes to a vertical c ...
- HDU 2672 god is a girl
先找规律,发现是斐波那契数列...然后..水题.. #include<cstdio> #include<cstring> #include<cmath> #incl ...
- 关于this指针理解
1. this指针的用处: 一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果.this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将 ...
- Android Studio 简单介绍和使用问题小结
原文 http://www.cnphp6.com/archives/59264 主题 Gradle Android Studio Android 随着android 5.0 的发布,android ...
- HDU 2475 BOX 动态树 Link-Cut Tree
Box Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) [Problem De ...
- odd or even?
public boolean isEven(int data){ if((data&1)== 0) return true; return false; } much faster than ...
- 区间的关系的计数 HDU 4638 离线+树状数组
题目大意:给你n个人,每个人都有一个id,有m个询问,每次询问一个区间[l,r],问该区间内部有多少的id是连续的(单独的也算是一个) 思路:做了那么多离线+树状数组的题目,感觉这种东西就是一个模板了 ...