JavaScript习题案列-------轮播图

需求

点击数字 实现图片切换
点击关闭 图片和关闭按钮同时消失
点击自动 轮播图进行自动轮换

思路

PS：2图片的意思是，点击2后，显示的图
①：先获取外层div 储存图片div的元素标签
②：当点击2时，获取2的img标签，并用setAttribute进行显示
③：显示2的图片后，把2的图片用replaceChild跟当前正在显示的图片换位置
④：关闭就比较简单 获取元素标签 用innneHTML=""
⑤：自动播放轮播图，可以设置点击自动单击事件再开始自动播放，也可以直接写在script外 直接自动轮播
PS：大体格式 style规范大家按自己的来，我只写出核心思路部分！

//这个div是个大boss  包含所有
<div id="div1">
	//这个div包含  123按键   img   关闭 自动按键
    <div id="div2">
    //这里就是我上面说的2图 所需按键  单击进行切换图片
        <a href="#" onclick="show(1)">1</a> 
        <a href="#" onclick="show(2)">2</a>
        <a href="#" onclick="show(3)">3</a>
    </div>
    //图片显示区
    <img src="img/3-1.gif" alt="" id="tu"/>
    //关闭按键
    <a href="#" onclick="gb()" id="gb">关闭</a>
    //这里我设置的是单击自动按键 才进行自动轮播
    <a href="#" onclick="zd()">自动</a>
</div>

单击数字按键进行图片切换

function show(num){
		//获取大boss的div
        var div1=document.getElementById("div1");
        //获取图片的元素标签
        var tu=document.getElementById("tu");
        //进行判断用户点击的哪个数字  再进行显示
        if(num==1){
            //添加点击1后要显示的图片
            tu.setAttribute("src","img/3-1.gif");
            //进行换位置
            div1.replaceChild(tu,div1.firstChild);
        }else if(num==2){
            tu.setAttribute("src","img/3-2.gif");
            div1.replaceChild(tu,div.firstChild);
        }else if(num==3){
            tu.setAttribute("src","img/3-3.gif");
            div1.replaceChild(tu,div1.firstChild);
        }
    }

关闭按键的单击事件

function gb(){
		//就和我上面一样  直接用innerHTML=""就行
        document.getElementById("div1").innerHTML="";
        document.getElementById("gb").innerHTML="";
    }

自动轮播的单击事件

//定义轮播次数
    var num=1;
    function zd(){
        //当循环次数大于三时  将num改为1  就循环播放
        if(num>3){
            num=1;
        }
        //获取显示的图片元素标签
        var img=document.getElementById("tu");
        //进行 图片的替换位置
        img.setAttribute("src","img/3-"+num+".gif");
        //自定义属性自加  来实现轮播循环
        num++;
    }
    //进行每1秒 执行zd（）一次
    setInterval("zd()",1000);