4
回答
js单步调试的运行结果和正常的运行结果不一样
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="sp.css" type="text/css" rel="stylesheet" charset="utf-8">
<script defer src="switchPic.js" charset="utf-8"></script>
</head>
<body>
		<div class="sp_box">
				<div class="sp_pics">
						<ul class="sp_list">
								<li class="sp_cur">
									<a class="sp_a" href="#"><img width="980" height="300" src="pics/sp1.jpg" alt="first pic" /></a>
								</li>
								<li class="sp_comm">
									<a class="sp_a" href="#"><img width="980" height="300" src="pics/sp2.jpg" alt="sec pic" /></a>
								</li>
								<li class="sp_comm">
									<a class="sp_a" href="#"><img width="980" height="300" src="pics/sp3.jpg" alt="third pic" /></a>
								</li>
						</ul>
				</div>
				<div class="sp_btn">
						<a href="#" class="sp_pre" title="上一页"></a>
						<a href="#" class="sp_next" title="下一页"></a>
						<ul class="sp_menu">
							<li class="sp_menu_list_cur"><a href="#" class="sp_menu_list_a"></a></li>
							<li class="sp_menu_list"><a href="#" class="sp_menu_list_a"></a></li>
							<li class="sp_menu_list"><a href="#" class="sp_menu_list_a"></a></li>
						</ul>
				</div>
		</div>


</body>
</html>


css:


body{
	width:980px;
	margin:0 auto;
	text-align:center;	
}
ul{	
	margin: 0px;
	padding: 0px;
	list-style:none;
}
.sp_box{
	height:300px;width:980px;
	margin-top:10px;
}
.sp_pics{width:980px;height:300px;overflow:hidden;position:relative;}
.sp_list{width:2940px;float:left;position:absolute;}
.sp_list li{float:left;position:absolute;}
.sp_cur{top:0px;left:0px;}
.sp_a{}
.sp_comm{top:0px;left:980px;}
.sp_btn{
	position:relative;
	height:50px;
	width:100%;
	background-color:white;
	top:-50px;
	left:0px;
	opacity:0.5;
}
.sp_pre{
position: absolute;
background: url(pics/pre.png) 0 0 no-repeat;
width: 20px;
height: 20px;
top: 20px;
left: 20px;
}
.sp_next{
position: absolute;
background: url(pics/next.png) 0 0 no-repeat;
width: 20px;
height: 20px;
top: 20px;
right: 20px;		
}
.sp_menu{width:100px;height:20px;margin:0 auto;text-align:center;}
.sp_menu_list,.sp_menu_list_cur{width:10px;height:10px;padding:5px;background:url(pics/menu.png) 0 0 no-repeat;float:left;}
.sp_menu_list_cur{background:url(pics/menu.png) 0 -23px no-repeat;}
.sp_menu_list_a{width:10px;height:10px;display:block;}
js:



var sp_box=document.getElementsByClassName("sp_box");
var sp_list=sp_box[0].getElementsByClassName("sp_list")[0].getElementsByTagName("li");
var piclen = sp_list.length;
var cur_list=sp_list[0].getElementsByClassName("sp_cur");
var pre=sp_box[0].getElementsByClassName("sp_pre");
var next=sp_box[0].getElementsByClassName("sp_next");
var count=0;
setInterval(play,1000);
//播放
function play(){
	if(count>0){
		sp_list[count-1].className="sp_comm";
	}
	sp_list[count].className="sp_cur";
	count++;
	if(count==piclen){
	sp_list[count-1].className="sp_comm";
		count=0;
	sp_list[0].className="sp_cur";

	}
//监听鼠标事件
//监听键盘事件
}
//左按钮
function gopre(){
alert("pre");

}
//右按钮
function gonext(){
alert("next");
}
//menu功能
function menufun(){
alert("menufun");
}
源代码如上,正常运行的时候只有只有前两个li元素在变化,但是在google浏览器里调试的时候就能正常运行。


<无标签>
举报
Devqin
发帖于5年前 4回/1K+阅
顶部