HTML+JS （初学）

最新推荐文章于 2023-02-16 19:42:43 发布

GHMSZ

最新推荐文章于 2023-02-16 19:42:43 发布

阅读量196

点赞数

文章标签： html

本文链接：https://blog.csdn.net/GHMSZ/article/details/117480100

版权

1、标题 2、菜单栏（加个超链接） 3、展示页面（图片轮播）

Jscript实现图片轮播：

 <script>
        function init(){
            //书写轮播图片的定时功能
            setInterval("changeImg()",3000);
        }
        //书写函数
        var i=0;
        function changeImg(){
            i++;
            //获取图片位置并设置src属性值
            document.getElementById("img1").src=i+".jpg";
            if(i==5){
                i=0;
            }
        }
    </script>

接下来写其他的构图，由于只用了HTML，所以用table来控制大小，让格式统一起来。

<table width="1200px" align="center"  cellpadding="2px" cellspacing="2px">
        <tr height="35" >
            <td width="100%" align="center" >
                <a href="#"><font face="comic sans ms" face="4">Home</font></a>
                <a href="#"><font face="comic sans ms" face="4">About Me</font></a>
                <a href="#"><font face="comic sans ms" face="4">My Life</font></a>
                <a href="#"><font face="comic sans ms" face="4">My Hobby</font></a>
                <a href="#"><font face="comic sans ms" face="4">My work</font></a>
            </td>
        </tr>
        <!--轮播图-->
        <tr>
            <td>
                <img src="1.jpg" width="100%"  id="img1"/>
            </td>
        </tr>
    </table><br /><br />

    <!--home段-->
    <table width="1400px" cellspacing="2px" cellpadding="2px" align="center">
        <tr><th><font face="comic sans ms" size="6"><strong>HOME</strong></font></th></tr><br /><br />
        <tr>
            <td align="center">
                <p align="center" ><font size="3" face="楷体">“小小的举动，会带来远大的效应”是林俊杰藏在心中多年的一个概念，但也因着还不能完美地呈现而一直搁置。过去的这些日子，林俊杰在体会了来自他身旁人生的体悟与深刻情感后，思想在他的内心渐渐地产生了变化，他深刻地以珍贵的情感与瞬间融入到创作的生命力，也以“真实”为驱动写下了这首歌曲，记录着他内心赤裸的撼动，也献给每一个身边重视的人们。</font></p>
                <br /><br />
                <img src="C.png"/><br /><br />
            </td>
        </tr>
    </table>