我是js新手,模仿别人做了个幻灯片效果,但奇怪的是:我在本地浏览器上,IE firefox和chrome 可以正常切换;而传到网上就奇怪了,firefox和chrome可以正常切换,在IE上却不能正常切换了。请高手看看这是什么问题,是代码的问题吗?还是...
全部代码如下:
html:
<div class="move_box">
<div id="number_box">
<div class="number_list">
<ul>
<li class="show">1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="img_box">
<div>
<dl>
<dt><a href="#"><img src="report1st.jpg" /></a></dt>
<dd></dd>
</dl>
<dl>
<dt><a href="#"><img src="firstnews.gif" /></a></dt>
<dd></dd>
</dl>
</div>
</div>
css:
.move_box{
width:650px;
height:180px;
position:relative;
overflow:hidden;
}
#number_box{
position:absolute;
bottom:0;
z-index:200;
height:25px;
width:650px;
}
.number_list{
float:right;
height:25px;
}
#number_box li{
display:block;
float:left;
color:#000;
background-color:#ccc;
height:20px;
width:20px;
line-height:20px;
text-align:center;
border:1px solid #000;
margin:0 1px;
}
#number_box li.show{
color:#fff;
background-color:#000;
}
#img_box{
width:650px;
height:180px;
overflow:hidden;
}
#img_box div{
width:100000px;
}
#img_box dl{
width:650px;
height:180px;
float:left;
overflow:hidden;
position:relative;
}
#img_box dt{
width:650px;
height:180px;
}
js:
function $get(id,tag){
if(!tag){
return document.getElementById(id);
}else{
return document.getElementById(id).getElementsByTagName(tag);
}
}
function mv(){
var img_box=$get("img_box","");
img_box.scrollLeft=0;
var wdth=img_box.offsetWidth;
var number_box=$get("number_box","li");
var current=0;
var mi;
number_box[current].className="show";
mn=setTimeout(move_number,5000);
function move_img(){
var distance=wdth*current-img_box.scrollLeft;
var speed=distance>0?Math.ceil(distance/10):Math.floor(distance/10);
img_box.scrollLeft+=speed;
}
function move_number(){
if(current<number_box.length-1)
{
number_box[current].className="";
current++;
number_box[current].className="show";
}else{
number_box[current].className="";
current=0;
number_box[current].className="show";
}
move();
}
function move(){
clearInterval(mi);
clearTimeout(mn);
mi=setInterval(move_img,15);
mn=setTimeout(move_number,5000);
}
for(var i=0;i<number_box.length;i++){
manual(i)
}
function manual(i){
number_box.onmouseover=function(){
number_box[current].className="";
current=i;
number_box[current].className="show";
move();
}
}
img_box.onmouseover=function(){
clearInterval(mi);
clearTimeout(mn);
}
img_box.onmouseout=function(){
mi=setInterval(move_img,15);
mn=setTimeout(move_number,5000);
}
}
window.onload=mv;
全部代码如下:
html:
<div class="move_box">
<div id="number_box">
<div class="number_list">
<ul>
<li class="show">1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="img_box">
<div>
<dl>
<dt><a href="#"><img src="report1st.jpg" /></a></dt>
<dd></dd>
</dl>
<dl>
<dt><a href="#"><img src="firstnews.gif" /></a></dt>
<dd></dd>
</dl>
</div>
</div>
css:
.move_box{
width:650px;
height:180px;
position:relative;
overflow:hidden;
}
#number_box{
position:absolute;
bottom:0;
z-index:200;
height:25px;
width:650px;
}
.number_list{
float:right;
height:25px;
}
#number_box li{
display:block;
float:left;
color:#000;
background-color:#ccc;
height:20px;
width:20px;
line-height:20px;
text-align:center;
border:1px solid #000;
margin:0 1px;
}
#number_box li.show{
color:#fff;
background-color:#000;
}
#img_box{
width:650px;
height:180px;
overflow:hidden;
}
#img_box div{
width:100000px;
}
#img_box dl{
width:650px;
height:180px;
float:left;
overflow:hidden;
position:relative;
}
#img_box dt{
width:650px;
height:180px;
}
js:
function $get(id,tag){
if(!tag){
return document.getElementById(id);
}else{
return document.getElementById(id).getElementsByTagName(tag);
}
}
function mv(){
var img_box=$get("img_box","");
img_box.scrollLeft=0;
var wdth=img_box.offsetWidth;
var number_box=$get("number_box","li");
var current=0;
var mi;
number_box[current].className="show";
mn=setTimeout(move_number,5000);
function move_img(){
var distance=wdth*current-img_box.scrollLeft;
var speed=distance>0?Math.ceil(distance/10):Math.floor(distance/10);
img_box.scrollLeft+=speed;
}
function move_number(){
if(current<number_box.length-1)
{
number_box[current].className="";
current++;
number_box[current].className="show";
}else{
number_box[current].className="";
current=0;
number_box[current].className="show";
}
move();
}
function move(){
clearInterval(mi);
clearTimeout(mn);
mi=setInterval(move_img,15);
mn=setTimeout(move_number,5000);
}
for(var i=0;i<number_box.length;i++){
manual(i)
}
function manual(i){
number_box.onmouseover=function(){
number_box[current].className="";
current=i;
number_box[current].className="show";
move();
}
}
img_box.onmouseover=function(){
clearInterval(mi);
clearTimeout(mn);
}
img_box.onmouseout=function(){
mi=setInterval(move_img,15);
mn=setTimeout(move_number,5000);
}
}
window.onload=mv;
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货