前端设计——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 ...

随机推荐

code.google.com
https://github.com/couchbase/sync_gateway/issues/492 This list shows the current base import paths, ...
postgresql 在linux上的源码安装
http://my.oschina.net/hippora/blog/375292 下载源码并解压 [root@fnddb ~]# wget https://ftp.postgresql.org/pu ...
Android中自定义veiw使用Java中的回调方法
//------------------MainActivity----中---------------------------------- import android.os.Bundle;imp ...
JVM CPU打满问题定位
1.线程不释放,导致Old区占满,系统不停的FullGC 发现应用并没有在进行FGC,而是进行频繁的YGC. YGC也存在异常,S1和S0区域都是从0直接跳到99% 观察堆大小装太发现Young区内存 ...
《Peering Inside the PE: A Tour of the Win32 Portable Executable File Format》阅读笔记二
Common Sections The .text section is where all general-purpose code emitted by the compiler or assem ...
PAT1003
As an emergency rescue team leader of a city, you are given a special map of your country. 作为一个城市的紧急 ...
AJAX（XMLHttpRequest）进行跨域请求方法详解（二）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求预检请求首先需要向另外一个域名的资源发送一个 HT ...
centos6.5下Zabbix系列之Zabbix安装搭建及汉化（转）
最近在研究zabbix,在整理完成之后就有了写一下总结博客的想法,在我研究zabbix的时候给我很大帮助的是it你好,博客地址 http://itnihao.blog.51cto.com/他做的zab ...
edittext判断获取焦点有焦点显示clear
mPhoneEt.setOnFocusChangeListener(new OnFocusChangeListener() { @Override public void onFocusChange( ...
【转】在 2016 年做 PHP 开发是一种什么样的体验？（一）
原文: https://www.v2ex.com/t/312651 在 2016 年做 PHP 开发是一种什么样的体验?(一) 嘿,我最近接到一个网站开发的项目,不过老实说,我这两年没怎么接触编程,听 ...

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

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

随机推荐

热门专题