模仿实现主流网页

码云链接：https://gitee.com/ssr2/codes/h3lug1wtnb9orq46ydsav18

动画说明：

　　　　打开网页后六张图片会水平循环播放，将鼠标放在图片上时图片的循环会暂停的动画效果

效果截图：

源代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <title>秦时明月</title>
        <style media="all">
            .picutre_many img {
                width: 1000px;
                height: 562px;
            }
        </style>
    </head>

    <body background="img/008.jpg">

        <center>
            <h1 align=“center”>秦时明月主题网页</h1></center>
        <hr>

        <div id="list" class=" picutre_many" style="overflow: hidden; height: 562px; width:1300px; margin: 0 auto;">
            <table cellspacing="0" cellpadding="0" style="width: 562px; border: 0px;">
                <tr>
                    <td id="list1">
                        <table style="border: 0px;" cellpadding="0" cellspacing="0">
                            <tr id="pic">
                                <td><img style="border: 0px;" alt="" src="img.001.jpg" /></td>
                                <td><img style="border: 0px;" alt="" src="img/002.jpg" /></td>
                                <td><img style="border: 0px;" alt="" src="img/003.jpg" /></td>
                                <td><img style="border: 0px;" alt="" src="img/004.jpg" /></td>
                                <td><img style="border: 0px;" alt="" src="img/005.jpg" /></td>
                                <td><img style="border: 0px;" alt="" src="img/006.jpg" /></td>
                            </tr>
                        </table>
                    </td>
                    <td id="list2"></td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            var speedpic = 20;
            document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;

            function Marqueepic() {
                if(document.getElementById("list2").offsetWidth - document.getElementById("list").scrollLeft <= 0) {
                    document.getElementById("list").scrollLeft -= document.getElementById("list1").offsetWidth;
                } else {
                    document.getElementById("list").scrollLeft++;
                }
            }
            var MyMarpic = setInterval(Marqueepic, speedpic);
            document.getElementById("list").onmouseover = function() {
                clearInterval(MyMarpic);
            }
            document.getElementById("list").onmouseout = function() {
                MyMarpic = setInterval(Marqueepic, speedpic);
            }
        </script>
        <table width="1300" border="1" align="center">
            <div>
                <tr>
                    <td>
                        <a href="http://list.youku.com/show/id_zef53e69a599711df97c0.html?tpa=dW5pb25faWQ9MTAzNzUzXzEwMDAwMV8wMV8wMQ&refer=baiduald1705" title="百步飞剑">百步飞剑</a>
                    </td>
                    <td>
                        <img src="01.jpg" width="200" height="300" />
                    </td>
                    <td>
                        <font face="楷体"><p>&nbsp;&nbsp;&nbsp;&nbsp;天下虽定，乱世未绝。天下第一剑客，始皇帝的近卫——盖聂，携故人之子——荆天明，为躲避秦始皇的追杀，踏上了荆棘密布的旅程。
                                                                    此刻，年少的天明对自己的身世以及未来将要经历的一切仍然一无所知，命运之手却已将一幅绚烂至极的画卷在其脚下展开。
                                                                    秦国边界，残月谷，盖聂一人一剑，尽屠300大秦铁骑精兵。这位天下第一剑客以满身伤痕告诉年少的天明何谓真正的强者。
                                                                    消息传来，皇帝震怒，勒令宰相—李斯务必铲除一切抗秦势力。李斯提出以江湖对江湖的所谓以毒攻毒的策略。
                                                                    鬼谷传人，原韩国贵族—卫庄，20年前（事实上应该是十五年，推算那时候正是历史上盖聂比武夺冠出名的时候）为同门师兄盖聂所败，
                                                                    一生所愿便是击败师兄，夺得天下第一剑的名号。为此，其不惜肉身，修炼鬼谷派的禁忌秘术，实力已是深不可测。李斯便以盖聂作饵，
                                                                    诱卫庄出山。逃亡路上，天明结识了楚国大将之后—少羽，墨家众高手，还有身世成谜的少女高月等人。卫庄手下的四大天王奇招迭出，
                                                                    对众人步步追杀。天明历经磨难，凭借过人的机智与勇气，终于一一挫败对手。怎奈卫庄处心积虑，处处设局，天明和盖聂最终还是被
                                                                    逼入绝境。卫庄谋划这一切的目的就是要逼迫盖聂和自己进行一场真正的决斗。一场等待了20年的宿命之战，在鬼谷派的纵横两大弟子
                                                                    之间无可避免地爆发。</p></font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="https://www.360kan.com/ct/PkHsbs8VMoa3Dj.html" title="夜尽天明">夜尽天明</a>
                    </td>
                    <td>
                        <img src="02.jpg" width="200" height="300" />
                    </td>
                    <td>
                        <font face="楷体"><p>&nbsp;&nbsp;&nbsp;&nbsp;《夜尽天明》开篇便是大铁锤与隐蝠的激战，之后便是高渐离与雪女联手战胜了隐蝠，而此时，卫庄的手下黑麒麟已经化妆成大铁锤手
                                                                     下潜如墨家机关城。黑麒麟打伤大师夺得机关城内部构造图交给卫庄，卫庄命令黑麒麟在机关城核心的中心水池下毒，之后，黑麒麟
                                                                     化妆成盖聂暗算徐夫子，不但下毒成功，而且使得高渐离对盖聂生疑，将其软禁在房间内。太阳升起，触动了黑麒麟下在水池中的鸩羽
                                                                     千夜，墨家机关城内顿时飘满毒气，墨家弟子死伤惨重。卫庄等人攻入机关城，与高渐离、端木蓉等人展开激战。而此时，天明、少羽
                                                                     、月儿三人进入墨家机关城禁地，闯过机关虎跳之后来到了袁飞处，由于少羽的恐高，天明在闯机关时与月儿一起不慎落入深谷，生死
                                                                     未卜。高渐离等人躲入墨家墨核，被卫庄团团围困，墨家正遭遇三百年来最大的浩劫……</p></font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="http://v.baidu.com/comic/884.htm?fr=ps_twala" title="诸子百家">诸子百家</a>
                    </td>
                    <td>
                        <img src="03.jpg" width="200" height="300" />
                    </td>
                    <td>
                        <font face="楷体"><q>&nbsp;&nbsp;&nbsp;&nbsp;公元前222年，秦发兵六十万攻楚，楚军节节败退。乱军之中，日后的名将之星蒙恬（蒙武之子）与未来的西楚霸王少羽第一次在沙场
                                                                    相遇。楚军寡不敌众，情况危急万分，少年霸王与帝国将星的初次交锋，胜负难测……两年之后，秦灭六国，统一中国，成为历史上第一
                                                                    位帝王。然而，乱世并未结束，一股强大的力量正在为颠覆大秦而崛起。他们分别是墨家、儒家、道家、法家、兵家、纵横家、阴阳家、
                                                                    医家、农家，历史上称之为诸子百家。如今，天下反秦势力最后的堡垒——墨家机关城，正遭遇三百年来最大的一次危机。盗跖虽然成功
                                                                    脱出，赶往求援，却被一神秘少女拦住去路。与此同时，墨家巨子率领各家英雄在赶往机关城途中，也遭到了阴阳家高手出其不意的暗
                                                                    袭。机关城中，身中剑伤的盖聂挥剑斩向身后…… 十二年后，纵与横再次交锋，鬼谷的宿命之战，终将在此有一个了结！墨家机关城会
                                                                    否就此陷落？墨家众人的命运将何去何从？天明的面前究竟还有多少荆棘之路在等待着他？被阴阳家虏去的高月又会有何遭遇？要以孤
                                                                    家寡人对抗诸子百家，嬴政能有几分胜算？在这动荡的乱世中，谁才能成为真正的王者？</q></font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="http://v.baidu.com/comic/1803.htm?fr=ps_twala" title="万里长城">万里长城</a>
                    </td>
                    <td>
                        <img src="04.jpg" width="200" height="300" />
                    </td>
                    <td>
                        <font face="楷体"><p>&nbsp;&nbsp;&nbsp;&nbsp;自从机关城崩塌，墨家抵抗势力几乎被全部清除。秦帝国又回到太平盛世的迷梦中……咸阳宫中的嬴政一边动用无数劳工营造万里长城，
                                                                    一边进行着一些更为精密的计划。现在这个计划已经接近完成，由阴阳家协助完成的巨艇“蜃楼”已经建造完毕。它壮丽精绝的身姿浮现
                                                                    海平面彼端，宛如人人梦想中的海上仙山。为了解开巨艇“蜃楼”的疑团，各家各派势力慢慢汇聚到这座平静的海边小城。此时，故事主
                                                                    角天明和少羽为了避开秦兵追捕，正在儒家庄园学习和生活。而接下来各种奇异事件在此地发生，小城的平静也被完全打破。所有的生
                                                                    死仇，家国恨，都将在那个时刻凝结。所有人的目光，都将在那个地点汇聚！芸芸众生不过是一块块城砖，用来铸造帝国的万里长城。
                                                                    </p></font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="http://list.youku.com/show/id_z9a8e9ba0605611e2a19e.html?tpa=dW5pb25faWQ9MTAzNzUzXzEwMDAwMV8wMV8wMQ&refer=baiduald1705" title="君临天下">君临天下</a>
                    </td>
                    <td>
                        <img src="05.jpg" width="200" height="300" />
                    </td>
                    <td>
                        <font face="楷体"><p>&nbsp;&nbsp;&nbsp;&nbsp;为躲避公输家族霸道机关兽的追杀，天明、少羽、石兰三人误打误撞，登上了停泊在海边的蜃楼。这艘始终停留在远处，可望而不可即
                                                                    的神秘巨舰，终于第一次近距离展现在三人面前，它华丽的外表之下，隐藏着天大的秘密。为躲开蜃楼上阴阳家弟子的追捕，三人逐渐
                                                                    深入到这座谜城一般的巨舰内部，开始了奇幻莫测的探险逃亡之旅。 与此同时，庖丁顺利从秦军监狱脱逃，并为墨家众人带回了重要
                                                                    信息，张良连夜制定出了第一步行动计划，青龙计划由此缓缓拉开序幕。 蜃楼上，天明等人迷失在奇异诡谲的无尽回廊之中，正在不
                                                                    知所措的时候，竟是高月的身影出现在远处。 桑海城郊，扶苏公子在一次出巡途中，遭遇刺客伏击。李斯奉命追查谋逆真凶，却发现
                                                                    种种蛛丝马迹都将嫌疑的矛头指向了小圣贤庄。 博浪沙前，风雨欲来，如利箭在弦，一触即发。而机缘巧合之下，天明和少羽却发现
                                                                    了更加令人震惊的秘密。 风卷雨击里，历史默然转身，乱世的帷幕，砰然落下。他说这片土地上我才是君临天下的真正王者，而他们
                                                                    说，即使注定了这条道路铺满荆棘与鲜血，我们仍将继续前行。你的执念阻挡不住侠者通往光明的大道。谁才是最终掌握乾坤的那个人，
                                                                    这不是句点，仅只是又翻过了新的一页篇章。
                        </p></font>
                    </td>
                </tr>
            </div>
        </table>
    </body>

</html>

2019-03-26

 

posted @ 2019-03-26 22:27  地三鲜（昵称被占）  阅读(328)  评论(0)    收藏  举报