图片的轮转为何没有成功,而是出现了俩个图片同时出现而且还出现错误

划水王 2019-08-09 05:23:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
#leftnav_focusimg{
width: 980px;
margin: 0px auto;
}
.left_nav{
background: #0099FF;
width: 190px;
padding: 1px;
z-index: 1;
float: left;
}
.sidebar{
background: #09F;
width: 190px;
padding: 1px;
margin:0px 10px 0px 1px;
z-index: 1;
float: left;
}
.sidebar h2{
color: #fff;
font-size: 14px;
line-height: 30px;
text-align: center;
}
#menu{
width: 190px;
background: #fff;
padding: 8px 0;
}
#menu li{
float: left;width: 149px;display: block;text-align: left;
padding-left: 40px;background: #fff;position: relative;
border-bottom: #ffeef4 1px solid;
height: 42px;vertical-align: middle;
}
#menu li:hover{
background: #0099ff;
}
#menu li a{
font-size: 14px;
color: #1B4053;
display: block;
text-decoration: none;
line-height: 28px;
}
#menu li:hover a{
color: #fff;
}
#menu li:hover div a{
font-size: 12px;
color: #3B4053;
line-height: 16px;
}
#menu li:hover div a:hover{
color: #cc0000;
}
#menu li:hover .cms_submenu{
left: 186px;
top: 0;
}
.cms_submenu{
float: left;position: absolute;left: -999em;text-align: left;
border-left: 6px solid #09f; border-top: 2px solid #09f;
border-bottom: 2px solid #09f;border-right: 2px solid #09f;
width: 500px; background: #fff; padding: 5px 0 5px;z-index: 1;
}
.cmsmenuleft{
float: left;
width: 500px;
color: #ccc;
padding: 5px;
z-index: 1;
}
.cmsmenuleft dt,.cmsmenuright dt{
font-weight: bold;
color: #09f;
margin: 5px 0;
padding: 3px 0 3px 10px;
text-align: left;
}
.cmsmenuleft dd i{
float: left;
padding: 0 8px;
margin:3px 0;
white-space: normal;
border-right: 1px solid #ccc;
}
.menu_new dd {
padding-left: 8px;
}
.index_page{
float: right; display: block;
height: 16px;
padding: 1px 0;
margin-right: 4px;
}
.index_page *{
float: left; display: inline; line-height: 16px;
border: 1px solid #B6CFCD;
text-align: center; padding: 0;margin: 0 2px;
}
.index_page strong{
background: #009A91;
color: #fff;width: 16px;
}
.index_page span{
color: #64B8Ef; padding: 3px 0 0 0;
border: 0; cursor: pointer;
}
.index_page a{
width: 16px;
color: #64B8EF;
text-decoration: none;
}
h2{
text-align: center;
}
#focusPic1{
margin-top: 10px;
}
#focusPic2{
margin-top: 10px;
}
#focusPic3{
margin-top: 10px;
}
</style>
</head>
<body>
<section class="leftnav_focusimg">
<aside id="left_nav">
<div class="sidebar">
<h2>全部旅游产品分类</h2>
<ul id="menu">
<li><a href="">市内旅游</a>
<div class="cms_submenu">
<div class="cmsmenuleft">
<dl class="menu_new">
<dt>热门项目</dt>
<dd>
<i><a href="">广场舞</a></i>
<i><a href="">滨海游</a></i>
<i><a href="">公园游</a></i>
<i><a href="">老建筑游</a></i>
<i><a href="">特色景点游</a></i>
</dd>
<div class="clear"></div>
</dl>
<dl class="menu_new">
<dt>活动推荐</dt>
<dd>
<a href="">[精品路线]旅顺、金石滩、环市、发现王国纯玩四日游</a>
<a href="">[优惠活动]老虎滩海洋公园一日游</a>
<a href="">[特价活动]发现王国荧光夜跑第二季(时间+费用+路线)</a>
</dd>
</dl>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
</aside>
<nav>
<script language="javascript" type="text/javascript">
var _t1=0;
var _t2=3;
var _tnum=3;
var _tn=1;
var _tt1=null;
_tt1=setTimeout('change_img()',_t1*1000);
function change_img() {
setFocus(_tn);
_tt1=setTimeout('change_img()',_t2*1000);
}
function setFocus(i) {
if (i>_tnum) {_tn=1;i=1;}
_tt1?document.getElementById('focusPic'+_tt1).style.display='none':'';
document.getElementById('focusPic'+i).style.display='block';
_tt1=i;
_tn++;
}
</script>
<!-- <焦点图1开始> -->
<div id="focusPic1" style="display: block;">
<a href="" target="_blank">
<img src="01.jpg" width="770px" alt="老虎滩海洋公园">
</a>
<h2><a href="" target="">老虎滩海洋公园</a></h2>
<div class="index_page">
<span onclick="javascript:setFocus(2);">点击切换焦点图--></span>
<strong>1</strong>
<a href="javascript:setFocus(2);">2</a>
<a href="javascript:setFocus(3);">3</a>
</div>
</div>
<!-- <焦点图1结束> -->
<!-- <焦点图2开始> -->
<div id="focusPic2" style="display:none;">
<a href="" target="_blank">
<img src="02.jpg" width="770px" alt="大连星海公园">
</a>
<h2><a href="" target="">大连星海公园</a></h2>
<div class="index_page">
<span onclick="javascript:setFocus(3);">点击切换焦点图--></span>
<a href="javascript:setFocus(1);">1</a>
<strong>2</strong>
<a href="javascript:setFocus(3);">3</a>
</div>
</div>
<!-- <焦点图2结束> -->
<div id="focusPic3" style="display:none;">
<a href="" target="_blank">
<img src="02.jpg" width="770px" alt="连星海公园">
</a>
<h2><a href="" target="">连星海公园</a></h2>
<div class="index_page">
<span onclick="javascript:setFocus(1);">点击切换焦点图--></span>
<a href="javascript:setFocus(1);">1</a>
<a href="javascript:setFocus(2);">2</a>
<strong>3</strong>
</div>
</div>
<div class="clear"></div>
</nav>
</section>
</body>
</html>

浏览器报出的错误:Unable to get property 'style' of undefined or null reference
...全文
52 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧