前端设计——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 ...
随机推荐
- C#判断文字是否为汉字
/// <summary> /// 检测一个字符串是不是以汉字开始 /// </summary> /// <param name="str">要 ...
- 上海赛区-org.apache.ibatis.type.TypeException: JDBC requires that the JdbcType must be specified for all nullable parameters.
执行此函数的时候报错 解决方法:关闭窗口之后刷新主页面 提示: 传入到xml sql语句中的参数为null时就会出现此错误,需要仔细检查
- Oracle表和表数据恢复
Oracle数据库表及表数据的恢复 1. 表恢复 对误删的表,只要没有使用 purge 永久删除选项,那么基本上是能从 flashback table 区恢复回来的. 数据表和其中的数据都是可以恢复回 ...
- php 高并发下数据同步的问题
1.加锁缺点:降低性能优点:减少代码逻辑复杂度(题主现在这样超过1w条就删数据的逻辑,感觉看起来就点糟糕啊,如果整个系统一复杂,这样的来回写数据,你确定你的逻辑还维护得下去?建议题主梳理一下代码的逻辑 ...
- A SPI class of type org.apache.lucene.codecs.PostingsFormat with name 'Lucene40' does not exist.
简单的建立索引和查询索引并不难,关键在于他的二次开发,让他适合你自己的需求 既然要二次开发就必须查看源码 首先看看索引过程中的核心类吧: IndexWriter 这个是核心组件, 建立和打开索引,以及 ...
- Python -- OOP高级 -- __slots__、@property
__slots__属性可以设置 允许被设置的属性 class Student: __slots__ = ("name", "age") >>> ...
- [原]点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。
window.onload = function () { document.getElementById('btn').onclick = function () { ...
- 【转】PHP里的basename函数不支持中文名的解决
今天用到basename 函数获取文件名称时,发现如果是中文的文件名返回只有后缀的空文件名(如:.pdf) string basename ( string path [, string suf ...
- json中文乱码问题
首先在 tomcat的 D:\apache-tomcat-7.0.57\conf\server.xml里添加中文编码 <Connector port="8080" proto ...
- postfix+dovecot配置多域名邮件服务器
mail邮局系统的MX(邮件交换)记录配置,以便收发邮件.(MX记录,是邮件交换记录,它指向一个邮件服务器,用于电子邮件系统发邮件时根据收信人的地址后缀来定位邮件服务器,如果没有做域名解析,邮局不能正 ...