前端设计——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 ...
随机推荐
- MySQL整理碎片
1 innodb引擎表 alter table TABLE_NAME engine='innodb'; 还有一种方法 optiize table TABLE_NAME; http://stackove ...
- js操作select和option
1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...
- EditText的一点深入的了解
最近在开发android下的记事本程序时,频繁的使用EditText控件,折腾来折腾去,算是对其的了解更深入了一些.特将这些收获记录如下: 一.几个属性的介绍 android:gravity=&quo ...
- apicloud本地测试安卓测试包安装
1.liutingdeMacBook-Pro:~ js-lt$ which adb 2.liutingdeMacBook-Pro:~ js-lt$ ls 3.liutingdeMacBook-Pro: ...
- Servlet事件监听器
监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 面试题:请描述一下java事件监听机 ...
- Android图片处理神器BitmapFun源码分析
作为一名Android开发人员,相信大家对图片OOM的问题已经耳熟能详了,关于图片缓存和解决OOM的开源项目也是相当的多,被大家熟知的就是Universal_image_loader和Volley了, ...
- C语言客户端服务器代码
/* sockclnt.c*/ #include <stdio.h>#include <string.h>#include <stdlib.h>#include & ...
- robot framework -记录关键字
1.set value if (当条件满足时,进行变量赋值) 2.focus (将焦点定在制定的元素) 3.win close +title(关闭制定title) 4.get list items ...
- Python实现删除目录下相同文件
让我们来分析一下这个问题:首先,文件个数非常多,手工查找是不现实的,再说,单凭我们肉眼,在几千张图片或文件里面找到完全相同的难度也是很大的.所以要用程序实现.那么用程序怎么实现呢?根据什么判断两个文件 ...
- elasticsearch 性能调优
所有的修改都可以在elasticsearch.yml里面修改,也可以通过api来修改.推荐用api比较灵活 1.不同分片之间的数据同步是一个很大的花费,默认是1s同步,如果我们不要求实时性,我们可以执 ...