前端设计——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="btn">

        <a id="left" href="javascript:vid(0);">&lt;</a>

        <a id="right" href="javascript:void(0);">&gt;</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);" >&lt;</a>

        <a id="right" href="javascript:void(0);">&gt;</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 ...

随机推荐

iOS9以后 GDataXMLNode修改方式
iOS9以后GDataXMLNode修改方式
sql server 的约束的作用于理解 [转]
SQL Server中的约束用来确保系统的完整性.一般约束可以分为:主键约束外键约束检查约束默认约束唯一约束非空约束但是一般我们需要特别注意前三种约束:主键约束,一就是说跟你系统的实体有很大的关系, ...
auto_ash
#!/usr/bin/ksh ##############paramter######################startdate=$1' 00:00:01'enddate=$2' 23:59: ...
转 vi 技巧和诀窍：令人刮目相看的 10 个超酷命令
for ksh vi 编辑器的许多选项可以控制编辑会话的外观和感觉.使用 :set 命令修改 vi 中的会话设置.按 Escape 键进入命令模式之后,可以使用 :set all 命令显示选项和设置的 ...
java解析XML获取城市代码
运行前先导入dom4j架包,由于我们公司用的代理服务器所以下面我设置了代理ip,不需要的可直接忽略 package com.chengshidaima.tools; import java.io.Bu ...
easyui实现权限管理
在js中: function makeEasyTree(data){ if(!data) return []; var _newData = []; //最终返回结果 var _treeArray = ...
tomcat内存优化问题
Java内存组成 1) 堆运行时数据区域,所有类实例和数组的内存均从此处分配.Java 虚拟机启动时创建.对象的堆内存由称为垃圾回收器的自动内存管理系统回收. 堆由两部分组成: 其中eden+fr ...
Node.js学习 - Global Object
全局对象:特殊的对象,它及其所有属性都可以在程序的任何地方访问. __filename 表示当前正在执行的脚本的文件名.它将输出文件所在位置的绝对路径,且和命令行参数所指定的文件名不一定相同. 如果在 ...
Illegal resource reference: @*android resources are private and not always present
0:前言在android开发中,当使用别人的代码的时候,在style.xml中有此种错误 1:解决方案删除*星号
ping命令使用技巧（一次Ping多个地址）
打开windows 命令行窗口, 在命令行输入以下命令: for /l %i in (1,1,255) do ping -n 1 -w 60 192.168.0.%i | find " ...

前端设计——js实现图片切换的淡入淡出

前端设计——js实现图片切换的淡入淡出的更多相关文章

随机推荐

热门专题