用JS实现图片切换

效果图
用JS实现图片切换
代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片切换</title>
        <style type="text/css">
        *{
            margin: 0px;
            padding:0px;
        }
        #outer{
            width: 500px;
            margin: 50px auto;
            padding:10px;
            background-color: pink;
            /*设置文本居中*/
            text-align: center;
                  }
        </style>
        <script type="text/javascript">
        window.onload = function(){
            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            //获取img标签
            var img =document.getElementsByTagName("img")[0];
            //创建一个数组，保存当前图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
            //创建一个变量，保存当前正在显示图片的索引
            var index = 0;
            //获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";				
            //为两个按钮绑定单击响应函数
            prev.onclick = function(){
                index--;
                if(index<0){
                    index = imgArr.length-1;
                }
                img.src = imgArr[index];
                info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";			
            }
            next.onclick = function(){
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
                    img.src = imgArr[index];
                    info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";			
            }

        }
        </script>
    </head>
    <body>
        <div id="outer">
            <p id="info"></p>
            <img src="img/1.jpg" alt="冰棍">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
    </body>
</html>
用JS实现图片切换

相关推荐
