前端设计——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 ...
随机推荐
- sql server 的约束的作用 于 理解 [转]
SQL Server中的约束用来确保系统的完整性.一般约束可以分为:主键约束外键约束检查约束默认约束唯一约束非空约束 但是一般我们需要特别注意前三种约束:主键约束,一就是说跟你系统的实体有很大的关系, ...
- pom 的scope标签分析
一.compile:编译范围compile是默认的范围:如果没有提供一个范围,编译范围依赖在所有的classpath 中可用,同时它们也会被打包.而且这些dependency会传递到依赖的项目中. 二 ...
- php 图片压缩处理
<?php require dirname(__FILE__).'/../includes/common.inc.php'; $_clean = array(); $_info = array( ...
- Trie/最短的名字
题目链接 /* 简单trie树的应用,注意在初始化的时候要把cnt也初始化,不然,WA! 下面的四分代码各有特点 */ //数组型,名字查询. #include<cstdio> #incl ...
- Swift -> RunTime(动态性) 问题 浅析
Swift是苹果2014年发布的编程开发语言,可与Objective-C共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序.Swift已经开源,目前最新版本为2.2.我们知道Objec ...
- android 检测是否插入U盘方法之一
本方法是检测文件/proc/partitions. import java.io.*; File Usbfile = new File("/proc/partitions");if ...
- ubuntu系统使用SSH免密码登陆
ubuntu系统使用SSH免密码登陆 | 浏览:5160 | 更新:2014-02-13 19:15 1 2 3 4 5 6 7 分步阅读 百度经验:jingyan.baidu.com 我们通常使用U ...
- deibian不能加vpn
http://www.cyberciti.biz/faq/deiban-ubuntu-linux-networkmanager-pptp-cisco-vpn-tab-disabled/ 经常搜goog ...
- Application对象
Application对象报讯是应用程序参数的额,多个用户可以共享一个Application.用于启动和管理ASP.NET应用程序. Count 属性 获取Application对象变量的个数,集合 ...
- mysql 查询 字段的类型
select column_name,data_type from information_schema.columnswhere table_name = '表名'