简单的JS幻灯片效果（播放图片） and Tab卡显示、展开、隐藏效果

自己练习JS写了2个简单的效果，如题。

直接上代码，在代码里添加注释，希望能对新学习JavaScript的有帮助，也帮自己强化练习。

 

 1     function getElemByClass(classname)//构造自己的通过class来获取Dom的方法
 2     {
 3         var elements = [];
 4            var alltags = document.all ? document.all : document.getElementsByTagName("*")//IE不支持getElementsByTagName("*")来获取全部元素，兼容浏览器
 5            for (var i=0; i<alltags.length; i++) {
 6               if (alltags[i].className==classname)
 7                   elements[elements.length] = alltags[i];
 8            }
 9            return elements;
10     }
11 i=1;   //定义全局变量i 记录图片的索引值 
12 function ppt()
13     {            
14         //i=1,2,3,4,5
15         document.getElementById("h").style.background="url(images/back"+i+".gif) no-repeat bottom";
16         if(i==5)//因为总共设置5张图片，所以i=5时候，直接设置背景效果。以下都是变化效果的判断逻辑，没什么难，理解下就可以。
17         {
18             document.getElementByClass("pnum"+4)[0].style.background="url(images/ppt"+4+".gif) no-repeat";
19             i=1;
20             document.getElementByClass("pnum"+5)[0].style.background="url(images/ppt"+5+"h.gif) no-repeat";
21         }
22         else
23         {
24         i++;
25         var p1=i-2;
26         var p2=i-1;
27         //p1=1,2,3,4,5
28         if(p1>1)
29         {
30             document.getElementByClass("pnum"+p1)[0].style.background="url(images/ppt"+p1+".gif) no-repeat";
31         }
32         else if(p1==0)
33         {
34             document.getElementByClass("pnum"+5)[0].style.background="url(images/ppt"+5+".gif) no-repeat";
35         }
36         else
37         {
38             document.getElementByClass("pnum"+1)[0].style.background="url(images/ppt"+1+".gif) no-repeat";
39         }
40         document.getElementByClass("pnum"+p2)[0].style.background="url(images/ppt"+p2+"h.gif) no-repeat";
41         }
42         setTimeout(ppt,10000);//调用window.setTimeout来循环执行ppt,10秒一次变化。
43     }
44 //这里为鼠标经过换图片逻辑，因为Html元素那是直接设置OnMouseOver(this),所以是如下function,将this作为参数传入.
45 function pptchange(e)
46     {
47         var mark=i-1;
48         i=e.className.match(/\d/);//重新设置 i 更正 i 的值
49         document.getElementById("h").style.background="url(images/back"+i+".gif) no-repeat";
50         
51         document.getElementByClass("pnum"+mark)[0].style.background="url(images/ppt"+mark+".gif) no-repeat";
52         e.style.background="url(images/ppt"+i+"h.gif) no-repeat";
53     }

　　window.onload=function(){ppt()};//加载后执行，要不选不到Dom。

再贴上Html：

<div id="h"></div>
<ul class="pptnum">
            <li><a href="javascript:void(0)" class="pnum1" onMouseOver="pptchange(this)"></a></li>
            <li><a href="javascript:void(0)" class="pnum2" onMouseOver="pptchange(this)"></a></li>
            <li><a href="javascript:void(0)" class="pnum3" onMouseOver="pptchange(this)"></a></li>
            <li><a href="javascript:void(0)" class="pnum4" onMouseOver="pptchange(this)"></a></li>
            <li><a href="javascript:void(0)" class="pnum5" onMouseOver="pptchange(this)"></a></li>
</ul>

至此，简单的幻灯片效果实现，仅仅是实现，未形成模块。

window.document.getElementByClass=getElemByClass;//这句一定要加上，上面的幻灯片不加上这句会报错，我忘加了。这里getElemByClass就不写了。
    Array.prototype.each=function(fn)//添加Array的each方法进行遍历，利用call将方法应用到数组的每个索引
    {
        for(var i=0;i<this.length;i++)
        {
            fn.call(this[i],i);
        }
    }
window.onload=function()
{
        var s=document.getElementByClass("d1");
        s.each(function(i){
            var s0=document.getElementByClass("d2")[i];
            var s1=document.getElementByClass("d3")[i];
            this.onclick=function()
            {
                if(s1.style.display!="block")
                {
                    s1.style.display="block";
                    //s0.style.background="url(images/nav2.gif) no-repeat right";
                }
                else
                {
                    s1.style.display="none";
                    //s0.style.background="url(images/nav1.gif) no-repeat right";
                }
            }
        });

}

Html：

                <dl>
                    <dd class="d1">
                        <span class="d2">新闻动态</span>
                        <div class="d3" style="display:block;">
                            <ul>
                                <li><a href="#">新闻动态</a></li>
                                <li><a href="#">新闻动态</a></li>
                                <li><a href="#">新闻动态</a></li>
                                <li><a href="#">新闻动态</a></li>
                                <li><a href="#">新闻动态</a></li>
                            </ul>
                        </div>
                    </dd>
                    <dd class="d1">
                        <span class="d2">公司简介</span>
                        <div class="d3" style="display:block;">
                        <img src="images/c_01.gif" title="公司概貌图" style="float:left; height:160px;" />
                            111111111111111111111111111111
                        </div>
                    </dd>
                    <dd class="d1">
                        <span class="d2">产品信息</span>
                        <div class="d3"></div>
                    </dd>
                    <dd class="d1">
                        <span class="d2">服务支持</span>
                        <div class="d3"></div>
                    </dd>
                </dl>

这里我Html设计的不好，最好使用<dl><dt>用dt做每个选项的标题</dt><dd>这里做每个选项的详细信息</dd></dl>

完。