【JavaScript小练习1】图片切换练习

最新推荐文章于 2024-06-28 16:20:01 发布

Happy_Ranmo

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量100

点赞数

分类专栏：前端小练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_51252051/article/details/114330458

版权

前端小练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.4 DOM查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
		#outer{
			width: 500px;
            margin:0 auto;
            text-align: center;
		}
        
    </style>
    <script>
		/**************图片按1-999从小到大编号****************/
		
        window.onload = function(){
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var img = document.getElementById("img");
			/* ----------此处更改第一张展示图片------------*/
            var local = 1;
            var Max_Local = 5;
			/*-----------此处更改最大图片数量-------------*/
            var Min_Local = 1;
            
            var src = function(a){
                return "img/"+ local + ".jpg";
            }


            img.src = src(local);
            left.onclick = function(){
                local--;
                if(local < Min_Local)local = Max_Local-1;
                img.src = src(local);
                console.log(local+"   "+src);
                
            }
            right.onclick = function(){
                local++;
                if(local > Max_Local - 1)local = Min_Local;
                img.src = src(local);
                console.log(local+"   "+src);
            }
            
        }
        
    </script>
</head>

<body>
    <div>
    </div>
    <div id="outer">
        <img id="img" style="width:500px" />
        <button id="left">上一张</button>
        <button id="right">下一张</button>
    </div>
    
</body>
</html>

Happy_Ranmo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript小练习1】图片切换练习

1.4 DOM查询<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css">
复制链接

扫一扫