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

划水王 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>

<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>


<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>

<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>