Royal 。◕‿◕。冰 2020-12-08 14:39 采纳率: 33.3%
浏览 223

Dw网页图片轮播代码,在实时视图中是正常播动,但在网页上所有图片叠在一起,不动?

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地域美食-晋城</title>
<style type="text/css">
    
    #Div1{
        margin: 0% auto;
        border: #FFFFFF;
        height: 20px;
        width: 120px;
        padding: 20px;
        text-align:center;
    }
        li{
            list-style-type: none;
        }
        #menu {
            width: 1000px;
            margin: 0px auto 0px;
            height: 50px;
        }
        #menu li{
            float:left;
            width: 190px;
            line-height:39px;
            text-align: center;
            position:relative;
            border:none;
        }
        #menu li a {
            font-size:20px; color:black;
            display:block;
            outline:0;
            text-decoration:none; 
        }
        #menu li:hover a {
            color: #FFFFFF; /*导航栏文字颜色 */
        }
        #menu li:hover .dropdown_1column {
            left:20px;
            top:38px;
        }
        .dropdown_1column{ /* 下拉菜单边框颜色*/
            margin: 0px auto;
            float: left;
            position: absolute;
            left: -999em;
            text-align: center;
            border: 0px solid #C95557;
            border-top: none;
            background:#DCC3C3;
            width: 140px;
        }
        #menu li:hover div a { /* 下拉菜单文字颜色*/
        font-size:14px
        ;color:#444;
        }

        #menu li:hover div a:hover{color:#F51B1E;} /*下拉带单鼠标停留颜色*/

        #menu li ul {
        list-style:none;padding:10px 0px;
        margin:0;
        }
        #menu li ul li {
        font-size:18px;
        line-height:40px;
        position:relative;
        padding:0;margin:0;
        float:none;
        text-align:center;
        width:130px;
        }
        #menu li ul li:hover {
        background:none;
        border:none;padding:0;
    }
        body {
        background-color: #CD3033;
        font-size: 18px;
        }
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:343px;
 width:808px;
 margin:0px auto;
 overflow: hidden;
 position: relative;
 margin:0px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:17px;}
 .wrap ol{position:absolute;
 right:5px;
 bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;}
 .wrap ol .on{background:#E97305;
 color:#fff;}
</style>
    <script type="text/javascript">
        function showTime()
        {
            var time=new Date();
            var h=time.getHours();
            var m=time.getMinutes();
            var s=time.getSeconds();
            if(m<=9)
                m="0"+m;
if(s<=9)
                s="0"+s;
            var str="<font size='1'>当前时间:</font></br>";
            str=str+h+":"+m+":"+s;
            document.getElementById("Div1").innerHTML=str;
            setTimeout("showTime()",1000);
        }
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
 pic=document.getElementById('pic').getElementsByTagName("li"),
 list=document.getElementById('list').getElementsByTagName('li'),
 index=0,
 timer=null;

 // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

 // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
 clearInterval(timer);
 }

 // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 2000);
 }
 // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };

 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }

 // 定义图片切换函数
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }

 };

</script>
 
</head>

<body onLoad="showTime()">
<table width="1039" height="1549" border="0" align="center" >
  <tbody>
    <tr>
      <td width="1033" height="1545" valign="top" bgcolor="#DD7B60"><table width="1038" height="338" border="0">
        <tbody>
          <tr>
            <td width="210" height="334" valign="top"><table width="200" height="332" border="1">
              <tbody>
                <tr>
                  <td width="200" height="250" valign="top"><div><img src="images/微信图片_20201204135257_爱奇艺.jpg" width="200" height="250" alt=""/></div></td>
                </tr>
                <tr>
                  <td height="74" valign="top"><div id="Div1"></div></td>
                </tr>
              </tbody>
            </table></td>
            <td width="810" align="center" valign="top"> 
                <div class="wrap" id="wrap">
 <ul id="pic">
 <li><img src="images/大同5.jpg" alt=""></li>
 <li><img src="images/大同1.jpg" alt=""></li>
 <li><img src="images/大同2.jpg" alt=""></li>
 <li><img src="images/大同3.jpg" alt=""></li>
 <li><img src="images/大同4.jpg" alt=""></li> 
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>
                
              </td>
          </tr>
        </tbody>
      </table>
        <table width="1000" border="0">
          <tbody>
            <tr>
              <td width="997" height="50" valign="top">
    <div id="menu">
    <ul>
        <li> <a href="" class="nodrop">首页</a></li>
        <li><a href="" class="drop">地域美食</a>
        <div class="dropdown_1column">
            <div class="col_1">
                    <ul class="simple">
                            <li><a href="">晋城</a></li>
                            <li><a href="">临汾</a></li>
                            <li><a href="">太原</a></li>
                            <li><a href="">长治</a></li>
                            <li><a href="">大同</a></li>
                            <li><a href="">运城</a></li>
                    </ul>
            </div>
        </div>
        </li>
        <li><a href="" class="drop">经典菜谱</a>
        <div class="dropdown_1column">
            <div class="col_1">
                    <ul class="simple">
                            <li><a href="">牛肉丸子面</a></li>
                            <li><a href="">过油肉</a></li>
                            <li><a href="">大盘鸡</a></li>
                            <li><a href="">刀削面</a></li>
                    </ul>
            </div>
        </div>
            </li>
        <li><a href="" class="drop">特色产品</a>
        <div class="dropdown_1column">
            <div class="col_1">
                    <ul class="simple">
                            <li><a href="">平遥牛肉</a></li>
                            <li><a href="">山西老陈醋</a></li>
                            <li><a href="">万荣苹果</a></li>
                            <li><a href="">清徐葡萄</a></li>
                            <li><a href="">太谷饼</a></li>
                    </ul>
            </div>
        </div>
        </li>
        <li><a href="" class="nodrop">联系我们</a></li>
    </ul>
    </div>

              </td>
            </tr>
          </tbody>
        </table>
        <table width="1038" height="1076" border="0">
          <tbody>
            <tr>
              <td width="1032" height="1072" align="left" valign="top" bgcolor="#F7B780"><div align="center" style="font-family: '方正行楷简体', '方正华隶简体', '方正楷体简体', '方正康体简体'; font-size: 36px; padding-top: 15px">晋城十大碗</div>
                <div>
                  <div align="center" style="padding-top: 20px"><img src="images/timg (2).jpg" width="771" height="442" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">晋城饮食文化历史悠久,源远流长,是随着人类物质文化和精神文明的不断发展而丰富的。晋城“十大碗”是晋城饮食文化中一支靓丽奇葩,在满足人们的物质生活同时,也丰富了人们的精神生活。晋城十大碗概括起来有"三甜"、"六咸"、"一个汤"。</p>
                <p style="text-indent: 2em;padding-left: 20px;padding-right: 20px;">所谓“三甜”就是:<a href="#mao9">天鹅蛋</a>、<a href="#mao8">油圪麻</a>、<a href="#mao10">八宝甜饭</a>。 </p>
                    <p style="text-indent: 2em;padding-left: 20px;padding-right: 20px;">所谓“六咸”就是:<a href="#mao4">过油肉</a>、<a href="#mao7">小酥肉</a>、<a href="#mao5">糊卜肉</a>、<a href="#mao3">毛头丸</a>、<a href="#mao2">肉丝烧大葱</a>、<a href="#mao6">糖醋溜丸</a>。 </p>
                    <p style="text-indent: 2em;padding-left: 20px;padding-right: 20px;padding-bottom: 20px">所谓“一个汤”就是:<a href="#mao1">木耳圪背</a>。 </p>
                  <p><strong>木耳圪贝</strong><a name="mao1"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/timg (4).jpg" width="725" height="436" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">木耳圪贝是山西晋城有上百年历史的传统名吃,是&ldquo;十大碗&rdquo;宴席中的头道菜,因制法特殊在当地广为流传。它是选用绿豆粉、鸡蛋精、猪油、木耳等综合制作的一道扣菜。具有柔软利口,洁白清亮,营养丰富,汤鲜味美的特点。</p>
                  <p><strong> 烧大葱</strong><a name="mao2"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/u=1569646935,819707626&fm=26&gp=0.jpg" width="592" height="308" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">烧大葱是晋城特色小吃,它选用巴公坡头大葱与肉丝用氽、炸、炒、蒸制成,它色泽金黄诱人,汤鲜葱香,配上鲜荔枝,使口味咸鲜香中有甘甜微酸。</p>
                  <p><strong>毛头丸</strong><a name="mao3"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/timg (5).jpg" width="607" height="342" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">这是选用羊肉、粉条、淀粉综合制成的一道蒸菜,其色泽银灰,香而不膻,毛头丸和肉丸虽同属丸子系列,但形状、外貌、风味却截然不同。丸子做好时毛茬茬的,如同古时黄毛丫头的头发,此美食故此得名。
                  </p>
                   <p><strong>过油肉</strong><a name="mao4"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/timg (7).jpg" width="647" height="390" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">过油肉是山西省最著名的传统菜肴,号称&ldquo;三晋一味&rdquo;,而晋城的&ldquo;大米过油肉&rdquo;独树一帜,特色是多汤水,搭配刚出锅的大米饭一起吃堪称一绝。</p>
                  <p><strong>糊卜肉</strong><a name="mao5"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/图片2.png" width="440" height="291" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;padding-bottom: 0px; line-height: 30px">精选猪五花肉经过炸、炖、蒸制而成,质地滑嫩,色泽红润,肥而不腻,入口即化。</p>
                  <p style="text-indent: 2em ; padding-left:20px ; padding-right: 40px; padding-top: 0px; line-height: 30px">据传在清朝,东沟有一家姓胡的有钱人非常孝顺他母亲。在母亲过寿的时候,就请了一个大师傅在家里给他做菜。师傅姓卜,在做菜的过程中,一不留神就把这道肉给烧的有点发了糊。因为烧的时间长了,颜色也发了红了,大师傅着急就把肉放到碗里上了蒸锅,蒸了以后就给上桌了。老太太吃了以后说:“这道菜入口就化,而且肥而不腻。叫什么菜 ?”这个大师傅急中生智说:“嗯哟!今儿个你是老寿星呢,你家姓胡,请了我一大师傅姓卜,那咱就叫它糊卜肉哇”。老太太:“这不错呀,这个菜真好”。 以后这道菜就出了名,流传下来就叫糊卜肉。</p>
                 <p><strong>糖醋溜丸</strong><a name="mao6"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/u=3102090833,1090910124&fm=26&gp=0.jpg" width="543" height="300" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">用肉泥加鸡蛋和干粉经过炸煨烹调的碗菜,外焦里嫩,酸甜可口。糖醋溜丸讲究外焦里嫩,酸甜适口。肉丸一定现炸,出油锅入汤锅,糖醋底味,勾芡装碗,端上桌兹兹响,一下嘴酥脆酸甜,口味绝佳。</p>
                    <p><strong>小酥肉</strong><a name="mao7"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/图片3.png" width="612" height="362" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">用五花肉加鸡蛋和干粉经过炸、煨、烹调的碗菜,肉酥汤香味浓,利口不腻。 </p>
                  <p><strong>油圪麻</strong><a name="mao8"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/timg (6).jpg" width="733" height="476" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">用面粉、食醋、实用碱经过发酵、炸制的碗菜,其色泽黄白,外焦里嫩,可甜可咸。</p>
                  <p><strong>天鹅蛋</strong><a name="mao9"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/图片1.png" width="489" height="319" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">所谓&ldquo;天鹅蛋&rdquo;并不是天鹅的蛋,而是一款以江米、红白糖、玫瑰、菊饼和果仁经过氽蒸、炸等方法制成的一种甜食,其色泽金黄,柔软香甜可口。</p>
                  <p><strong>甜饭</strong><a name="mao10"></a></p>
                  <hr align="left" width="100">
                  <div align="center" style="padding-top: 20px"><img src="images/862e735cbff642848717213bd21c47f9.jpeg" width="635" height="411" alt=""/></div>
                  <p style="text-indent: 2em ; padding:20px;line-height: 30px">以江米、红薯、花生仁、梨、玫瑰、菊饼、枣、等经过氽蒸制成的甜菜,其色泽金红、米粘质软、入口清香、落口甘甜。</p>
                </div></td>
            </tr>
          </tbody>
        </table>
        <table width="1031" height="67" border="0">
          <tbody>
            <tr>
              <td height="63" align="center" valign="middle">联系我们:13111151515 ——                 961957007@qq.com</td>
            </tr>
          </tbody>
      </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

  • 写回答

1条回答 默认 最新

  • 起伏羊 2023-03-21 13:25
    关注

    这个放到前面,别放上面,放上面元素获取不到;
    然后把 showTime() 在window.onload里调用一下

    评论

报告相同问题?

悬赏问题

  • ¥15 关于#python#的问题:求帮写python代码
  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人,不要ai!matlab有关常微分方程的问题求解决,
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字?