JavaScript 图片切换练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #main{
                width: 300px;
                padding: 20px;
                margin: 10px auto;
                background-color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <p id="info"></p>
            <img src="img/1.jpg"/>
            <button id="pre">上一张</button>
            <button id="next">下一张</button>
        </div>
    </body>
    <script type="text/javascript">
        //获取按钮name元素
        var pre=document.getElementById("pre");
        var next=document.getElementById("next");
        
        //创建一个数组来保存图片路径，切换图片就是切换图片路径
        var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
        
        //获取img元素，赋予img为数组元素
        var img=document.getElementsByTagName("img")[0];
        //alert(img);
        
        //创建保存图片路径的索引(数组下标)
        var index=0;
        
        //用innerHTML向<p>添加提示语句
        var info=document.getElementById("info");
        function fun(){
            info.innerHTML="总共 "+ imgArr.length + " 张，现在是第 "+(index+1)+" 张";
        }
        fun();
        //.为两个按钮创建事件处理函数
        pre.onclick=function(){
            //alert("上一张");
            //切换到上一张，索引自减
            index--;
            //判断,使图片循环切换，防止超界
            if(index<0){
                index=imgArr.length-1;
            }
            img.src=imgArr[index];
            fun();//调用函数改变<p>内容
        }
        next.onclick=function(){
            //alert("下一张");
            //切换到上一张，索引自减
            index++;
            if(index>imgArr.length-1){
                index=0;
            }
            img.src=imgArr[index];
            fun();
        }
        
    </script>
</html>
JavaScript 图片切换练习

猜你喜欢
