图片轮播项目：HTML & CSS & JavaScript（源码，中文注释，英文源码架构，中文简化架构）——前端成长之路

最新推荐文章于 2022-06-12 23:35:44 发布
知1而N
最新推荐文章于 2022-06-12 23:35:44 发布
阅读量155
点赞数
文章标签： javascript html5 html css 项目架构
本文链接：https://blog.csdn.net/lsylovejava/article/details/111308407
版权
前端专栏收录该内容
3 篇文章 0 订阅
订阅专栏
本文介绍了前端开发中的一个经典案例——图片轮播项目的实现。通过四个步骤，包括项目源码、中文注释、英文源码架构和中文简化架构的详细解读，帮助开发者理解并掌握图片轮播的制作技巧，是前端成长之路的重要实践。
摘要由CSDN通过智能技术生成
踏破虚空成神只需四步

1——项目源代码——
2——项目中文注释——
3——项目英文源码架构——
4——中文抽象架构——
前端项目：图片轮播

<!-- DOM模型与操作CSS 项目之图片轮换 -->

<!-- *************************************************** -->

<!-- 源代码-->
<!DOCTYPE html> 
<html>
	<head-->
        <style type="text/css">
            a{
                font-size:13px;
                background-color:#EE0000;
                color:#ffffff;
                width:20px;
                text-decoration:none;
            }
        </style>
        <script>
            var nowShow = 1 //nowShow为当前显示的图像序号
            function show(index) {
                if(Number(index)){
                    clearTimeout(sid) //当点击按扭时，清除计时器
                    nowShow = index
                }
                for(var i = 1;i < 5;i++){
                    //分别显示、隐藏对应图像
                    if(i == nowShow)
                        document.getElementById("img" + nowShow).style.display ="block"
                    else
                        document.getElementById("img" + i).style.display ="none"
                }
                //设置下一个图像
                if(nowShow == 4)
                    nowShow = 1
                else
                    nowShow++
                sid = setTimeout('show()', 3000);
            }				
        </script>
	</head>
	<body onload="show()">
		<div style="position:absolute;left:60px;top:60px;">
			<img id="img1" src="images/banner1.jpg" style="display:none;" border="1">
			<img id="img2" src="images/banner2.jpg" style="display:none;" border="1">
			<img id="img3" src="images/banner3.jpg" style="display:none;" border="1">
			<img id="img4" src="images/banner4.jpg" style="display:none;" border="1">
		</div>
		<div style="position:absolute;left:300px;top:230px;" align="center">
			<a href="javascript:show(1)">1</a>
			<a href="javascript:show(2)">2</a>
			<a href="javascript:show(3)">3</a>
			<a href="javascript:show(4)">4</a>
		</div>
	</body>
</html>

<!-- ***************************************************************************** -->

<!-- 中文注释 -->

<!-- 文档声明头 ：本文档处理的是 HTML 文档-->
<!DOCTYPE html> 

<!-- html 标签：根元素，此处表示文档的开始。 -->
<html>
    <!-- head 标签：网页的头部，设置网页的相关信息 -->
	<head-->
        <!-- title 标签：设置网页标题 -->
        <title>HTML 简介</title>
        <!-- 
        style 标签：<style> 标签用于为 HTML 文档定义样式信息。
        在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
        type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
        style 元素位于 head 部分中。
         -->
        <style type="text/css">
            /* 定义a标签的属性
            <a> 标签：定义超链接，用于从一张页面链接到另一张页面。
            <a> 元素最重要的属性是 href 属性，它指示链接的目标。
                
                全局属性
                <a> 标签：支持 HTML 中的全局属性。
                事件属性
                <a> 标签：支持 HTML 中的事件属性。
             */
            a{
                /* HTML <font> 标签 ：规定文本的字体、字体尺寸、字体颜色。*/
                font-size:13px;
                /* CSS  background-color 属性: 设置元素的背景颜色。十六进制“红（FF）绿（FF）蓝（）FF” */
                background-color:#EE0000;
                /* CSS  color 属性: 设置元素的前景色,此处规定文本的颜色。 */
                color:#ffffff;
                /* CSS  width 属性：设置元素的宽度  */
                width:20px;
                /* CSS  text-decoration 属性：规定添加到文本的修饰，下划线、上划线、删除线等。此处none表示没有文本装饰 */
                text-decoration:none;
            }
           
        </style>  <!-- style 标签结束 -->
      
        <!-- script标签
        <script> 标签用于定义客户端脚本，比如 JavaScript。
        script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
        必需的 type 属性规定脚本的 MIME 类型。
        JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
         -->
        <script>
            /*
            JavaScript var 语句

            var 语句用于声明变量。
            JavaScript 变量的创建也叫作"声明"一变量:
                var carName;
                变量声明后，变量为空 (没有值)。
            为变量赋值，操作如下:
                carName = "Volvo";
            声明变量时，你同样可以为变量赋值：
                var carName = "Volvo";
            */
            var nowShow = 1 //nowShow为当前显示的图像序号

            /*
            一、JavaScript 函数语法
                JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
                函数名（规则与变量名相同）。

                function name(参数 1, 参数 2, 参数 3....) {
                    要执行的代码
                }
                函数参数（Function parameters）是在函数定义中所列的名称。
                函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
                在函数中，参数是局部变量。
                在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

            二、函数调用
                函数中的代码将在其他代码调用该函数时执行：
                当事件发生时（当用户点击按钮时）
                当 JavaScript 代码调用时
                自动的（自调用）
          
            三、函数返回
                当 JavaScript 到达 return 语句，函数将停止执行。
                如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
                函数通常会计算出返回值。这个返回值会返回给调用者
            
            四、HTML DOM index 属性
            可返回下拉列表中选项的索引位置。
            */
            function show(index) {
                if(Number(index)){
                    /*
                    HTML DOM Window 对象
                    一、HTML DOM clearTimeout() 方法
                    可取消由 setTimeout() 方法设置的 timeout。
                    */ 
                    clearTimeout(sid) //当点击按扭时，清除计时器
                    nowShow = index
                }
                for(var i = 1;i < 5;i++){
                    //分别显示、隐藏对应图像
                    if(i == nowShow)
                        /*
                        一、HTML DOM Document 对象
                        每个载入浏览器的 HTML 文档都会成为 Document 对象。
                        Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
                        提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
                        write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。

                        二、HTML DOM getElementById() 方法
                        可返回对拥有指定 ID 的第一个对象的引用。
                        HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
                        不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
                        在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
                       
                        三、HTML DOM Style 对象
                        代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

                        四、HTML DOM display 属性
                        设置元素如何显示。

                        五、none 是一个特殊的常量。 
                        None和False不同。 None不是0。 None不是空字符串。 None和任何其他的数据类型比较永远返回False。
                        */ 
                        document.getElementById("img" + nowShow).style.display ="block"
                    else
                        document.getElementById("img" + i).style.display ="none"
                }
                //设置下一个图像
                if(nowShow == 4)
                    nowShow = 1
                else
                    nowShow++
                
                /*
                HTML DOM Window 对象
                一、HTML DOM setTimeout() 方法
                用于在指定的毫秒数后调用函数或计算表达式。
                */  
                 
                sid = setTimeout('show()', 3000);
            }				
        </script>
	</head>

    <!-- 
    一、body 标签定义文档的主体，也就是我们的主要内容。
    
    二、HTML onload 事件属性
    onload 属性在对象已加载时触发。
    onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
    -->
	<body onload="show()">
        <!-- 
        一、HTML <div> 标签
        <div> 可定义文档中的分区或节（division/section）。
        <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
        如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
        
        用法
        <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
        可以通过 <div> 的 class 或 id 应用额外的样式。
        不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
        可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，
        class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

        二、HTML <style> 标签
        <style> 标签用于为 HTML 文档定义样式信息。
        在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
        type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
        style 元素位于 head 部分中。

         -->
		<div style="position:absolute;left:60px;top:60px;">
            <!-- 
            一、HTML <img> 标签
            img 元素向网页中嵌入一幅图像。
            请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。
            <img> 标签创建的是被引用图像的占位空间。
            <img> 标签有两个必需的属性：src 属性 和 alt 属性。

            二、HTML id 属性
            id 属性规定 HTML 元素的唯一的 id。
            id 在 HTML 文档中必须是唯一的。
            id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

            三、HTML <img> 标签的 src 属性
            <img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
            提示：为了整理文档的存储，创作者通常会把图像文件存放在一个单独的文件夹中，
            而且通常会将这些目录命名为 "pics" 或者 "images" 之类的名称。
            在 W3School 在线教程中，我们的工程师把大部分常用的图像都存放到一个名为 "i" 的文件夹中，"i"是 "images" 的缩写，
            这样做的好处是可以最大程度地简化路径。

            四、HTML <style> 标签
            <style> 标签用于为 HTML 文档定义样式信息。
            在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
            type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
            style 元素位于 head 部分中。


            五、HTML DOM display 属性
            设置元素如何显示。


            六、CSS border 属性
            border 简写属性在一个声明设置所有的边框属性。
                可以按顺序设置如下属性：
                border-width
                border-style
                border-color
            如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
             -->
			<img id="img1" src="images/banner1.jpg" style="display:none;" border="1">
			<img id="img2" src="images/banner2.jpg" style="display:none;" border="1">
			<img id="img3" src="images/banner3.jpg" style="display:none;" border="1">
			<img id="img4" src="images/banner4.jpg" style="display:none;" border="1">
		</div>
        <!-- 
        一、HTML DOM position 属性
        把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

        值	        描述
        static	    默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
        relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
        absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
        fixed	    位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

        二、HTML <div> 标签的 align 属性
        规定 div 元素中的内容的水平对齐方式。

        值	        描述
        left	    左对齐内容。
        right	    右对齐内容。
        center  	居中对齐内容。
        justify	    对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
         -->
		<div style="position:absolute;left:300px;top:230px;" align="center">
            <!-- 
            一、HTML <a> 标签
            <a> 标签定义超链接，用于从一张页面链接到另一张页面。
            <a> 元素最重要的属性是 href 属性，它指示链接的目标。
            在所有浏览器中，链接的默认外观是：
            未被访问的链接带有下划线而且是蓝色的
            已被访问的链接带有下划线而且是紫色的
            活动链接带有下划线而且是红色的

            二、HTML <a> 标签的 href 属性
            <a> 标签的 href 属性用于指定超链接目标的 URL。
            href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，
            那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
             -->
			<a href="javascript:show(1)">1</a>
			<a href="javascript:show(2)">2</a>
			<a href="javascript:show(3)">3</a>
			<a href="javascript:show(4)">4</a>
		</div>
	</body>
</html>

<!-- ***************************************************************************** -->

<!-- 英文源码架构-->
<!DOCTYPE html> 
<html>
	<head-->
        <style type="">a{}</style>
        <script>
            function show(index) {}				
        </script>
	</head>
	<body onload="show()">
		<div style="">
			<img id="" src="" style="" border="">
            <img id="" src="" style="" border="">
            <img id="" src="" style="" border="">			
		</div>
		<div style="" align="">
			<a href="">1</a>
            <a href="">N</a>
		</div>
	</body>
</html>

<!-- ***************************************************************************** -->

<!-- 中文架构 -->
文档声明头 
文档开始
	网页头部 
		网页标题

        文档CSS样式
			样式链接

        客户端脚本
            脚本操作(全局部变量，函数等)			

	网页文档主体
		文档分区或节
			嵌入此区内容			
<!-- ***************************************************************************** -->