图像轮播-javascript

来源：互联网发布：大数据时代的小数据编辑：程序博客网时间：2024/05/01 10:55

关键：通过DOM树获取DOM元素。

关键函数：getElementById，querySelector，removeProperty，remove，add

HTML代码：

<div>    <h1>EXAMPLE ONE</h1>    <div id="exmaple1">        <span id="before"></span>        <img class="show" src="images/example/example0.jpg" /><img src="images/example/example1.jpg" /><img src="images/example/example2.jpg" /><img src="images/example/example3.jpg" /><img src="images/example/example4.jpg" /><img src="images/example/example5.jpg" /><img src="images/example/example6.jpg" /><img src="images/example/example7.jpg" />        <span id="next"></span>    </div> </div>

与Jquery不同的是，这里的img标签是连续排列的。因为如果按照jquery那一节排列。<img>标签之间存在一个textContent元素，他的nodeType是3，而不是DOM元素的nodeType1，解决这个问题的方法之一就是将img标签按照上述方式连续排列。

CSS代码：

与Jquery那一节的差不多

Javascript代码：

var sibling=document.getElementById("exmaple1").querySelectorAll("img");      var current;      for(var s=0; s<sibling.length; s++){        if(sibling[s].className!="show"){            sibling[s].style.display="none";        }else{            current=sibling[s];        }      }      var t=setInterval(showImage,"2000");      function showImage(){        var current=document.getElementById("exmaple1").querySelector(".show");        var next=current.nextSibling;        var ss=next.nodeType;        if(ss!=1){            next=sibling[0];        }        current.classList.remove("show");        current.style.display="none";        next.classList.add("show");        next.style.removeProperty("display");      }            document.getElementById("before").addEventListener("click",clickHandler,false);      document.getElementById("next").addEventListener("click",clickHandler,false);            function clickHandler(e){        clearInterval(t);        var id=e.target.id;        var current=document.getElementById("exmaple1").querySelector(".show");        current.className="";        current.style.display="none";        switch(id){            case "before":{                var prev=current.previousSibling;                if(prev.nodeType!=1){                    prev=sibling[sibling.length-1];                }                prev.className="show";                prev.style.removeProperty("display");            }            break;            case "next":{                var next=current.nextSibling;                if(next.nodeType!=1){                    next=sibling[0];                }                next.className="show";                next.style.removeProperty("display");            }            break;        }        t=setInterval(showImage,"2000");      }

为节点添加类名的方式有两种，一种是prev.className="show";，另一种是current.classList.remove("show");，其中classList返回的是一个DOMTokenList对象，这个对象定义了一些有用的方法。具体见HTML5权威指南第580页。

为节点修改样式的方法也有两种，一种是current.style.display="none";，其中style返回的是一个CSSStyleDeclaration对象，另一种是style.setProperty（）。具体见HTML5权威指南第613页。

从效果上来看，addEventListenner支持火狐和IE。并且以上的样式也支持火狐和IE。与Jquery相比，javascript比较难实现比较复杂的动画，比如最简单的fadeIn和fadeOut

效果图：

0 0