猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为何不能将这个行内css写在 style里面？

有一段轮播的代码
html的body部分
<
>
我发现把这个里面的style拿走，写到css部分里面去就不行，不知道为何？
可以正常运行的html全部。
*{
margin:0;padding:0;text-decoration:none;
}
body{
padding:20px;
}
#container{
width:600px;height:392px;border:3pxsolid#333;overflow:hidden;position:relative;margin:0auto;
}
#list{
width:4200px;height:400px;position:absolute;z-index:1;
}
#listimg{
float:left;width:600px;height:392px;
}
#buttons{
position:absolute;height:10px;width:100px;z-index:2;bottom:20px;left:250px;
}
#buttonsspan{
cursor:pointer;float:left;border:1pxsolid#fff;width:10px;height:10px;border-radius:50%;background:#333;margin-right:5px;
}
#buttons.on{
background:orange;
}
.arrow{
cursor:pointer;display:none;line-height:30px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:40px;position:absolute;z-index:2;top:180px;background-color:RGBA(0,0,0,.5);color:white;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#container:hover.arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
window.onload=function(){
varcontainer=document.getElementById('container');
varlist=document.getElementById('list');
varbuttons=document.getElementById('buttons').getElementsByTagName('span');
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=1;
varchanged=false;
vartimer;
functionshowButton(){
for(vari=0;iif(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
functionchange(offset){
changed=true;
varnewleft=parseInt(list.style.left)+offset;
vartime=300;
varinterval=10;
varspeed=offset/(time/interval);
functiongo(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}
else{
changed=false;
list.style.left=newleft+'px';
if(newleft>-600){
list.style.left=-3000+'px';
}
if(newleft<-3000){
list.style.left=-600+'px';
}
}
}
go();
}
functionplay(){
timer=setInterval(function(){
next.onclick();
},3000);
}
functionstop(){
clearInterval(timer);
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
if(!changed){
change(-600);
}
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
if(!changed){
change(600);
}
}
for(vari=0;ibuttons[i].onclick=function(){
if(this.classname=='on'){
return;
}
varmyindex=parseInt(this.getAttribute('index'));
varoffset=-600*(myindex-index);
index=myindex;
showButton();
if(!changed){
change(offset);
}
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
<
>
不可以运行的html全部
*{
margin:0;padding:0;text-decoration:none;
}
body{
padding:20px;
}
#container{
width:600px;height:392px;border:3pxsolid#333;overflow:hidden;position:relative;margin:0auto;
}
#list{
width:4200px;height:400px;position:absolute;z-index:1;left:-600px;
}
#listimg{
float:left;width:600px;height:392px;
}
#buttons{
position:absolute;height:10px;width:100px;z-index:2;bottom:20px;left:250px;
}
#buttonsspan{
cursor:pointer;float:left;border:1pxsolid#fff;width:10px;height:10px;border-radius:50%;background:#333;margin-right:5px;
}
#buttons.on{
background:orange;
}
.arrow{
cursor:pointer;display:none;line-height:30px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:40px;position:absolute;z-index:2;top:180px;background-color:RGBA(0,0,0,.5);color:white;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#container:hover.arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
window.onload=function(){
varcontainer=document.getElementById('container');
varlist=document.getElementById('list');
varbuttons=document.getElementById('buttons').getElementsByTagName('span');
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=1;
varchanged=false;
vartimer;
functionshowButton(){
for(vari=0;iif(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
functionchange(offset){
changed=true;
varnewleft=parseInt(list.style.left)+offset;
vartime=300;
varinterval=10;
varspeed=offset/(time/interval);
functiongo(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}
else{
changed=false;
list.style.left=newleft+'px';
if(newleft>-600){
list.style.left=-3000+'px';
}
if(newleft<-3000){
list.style.left=-600+'px';
}
}
}
go();
}
functionplay(){
timer=setInterval(function(){
next.onclick();
},3000);
}
functionstop(){
clearInterval(timer);
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
if(!changed){
change(-600);
}
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
if(!changed){
change(600);
}
}
for(vari=0;ibuttons[i].onclick=function(){
if(this.classname=='on'){
return;
}
varmyindex=parseInt(this.getAttribute('index'));
varoffset=-600*(myindex-index);
index=myindex;
showButton();
if(!changed){
change(offset);
}
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
<
>
两段代码仅仅有一处不同。
可以正常运行的html文件style部分
#list{
width:4200px;height:400px;position:absolute;z-index:1;}
body部分
不能正常运行html文件
style部分
#list{
width:4200px;height:400px;position:absolute;z-index:1;left:-600px;}
body部分
其他部分完全相同，请问，这是为何？

			

				
扬帆大鱼

				
浏览 679回答 2

			

			
			
		

		


		

		

			
			
2回答

			

				
			

			
		

		

			
			打开App，查看更多内容
		

	
	

	随时随地看视频慕课网APP


	
	
	

		
相关分类

		

			
			

			
				 JavaScript