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 ul li img{
width: 100%;
height: 100%;
}
.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 () {
showTime()
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic').getElementsByTagName("li"),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;
// console.log(warp,pic,list,"00")
// 定义并调用自动播放函数
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 >
<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="./01.jpg" alt=""></li>
<li><img src="./02.jpg" alt=""></li>
<li><img src="./03.jpeg" 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">
木耳圪贝是山西晋城有上百年历史的传统名吃，是“十大碗”宴席中的头道菜，因制法特殊在当地广为流传。它是选用绿豆粉、鸡蛋精、猪油、木耳等综合制作的一道扣菜。具有柔软利口，洁白清亮，营养丰富，汤鲜味美的特点。
</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">
过油肉是山西省最著名的传统菜肴，号称“三晋一味”，而晋城的“大米过油肉”独树一帜，特色是多汤水，搭配刚出锅的大米饭一起吃堪称一绝。
</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">
所谓“天鹅蛋”并不是天鹅的蛋，而是一款以江米、红白糖、玫瑰、菊饼和果仁经过氽蒸、炸等方法制成的一种甜食，其色泽金黄，柔软香甜可口。
</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>
你window.onload没执行，因为你给body加了onload事件两个事件冲突了只能运行showTime事件，看看这个https://blog.csdn.net/weixin_34365417/article/details/92420316
分享
