首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > ASP >

小弟我使用JS实现幻灯片,但遇到一个有关问题,请前辈指引。

2013-09-05 
我使用JS实现幻灯片,但遇到一个问题,请前辈指引。。。table width1024 border0 aligncenter cellpa

我使用JS实现幻灯片,但遇到一个问题,请前辈指引。。。


<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0" class="classX4Y0-1">
  <tr id="idX4Y1-1" class="classX4Y1-1" style="display:block;" onMouseOver="" onMouseOut="">
    <td align="center"><a href="20120815144125gsxw.asp" target="_blank"><img src="tupian/banner01.jpg" width="100%"></a></td>
  </tr>
    <tr id="idX4Y2-1" class="classX4Y2-1" style="display:none;" onMouseOver="" onMouseOut="">
<td align="center"><a href="20130320123714qyzk.asp" target="_blank"><img src="tupian/banner02.jpg" width="100%"/></a></td>
  </tr>
    <tr id="idX4Y3-1" class="classX4Y3-1" style="display:none;" onMouseOver="" onMouseOut="">
<td align="center"><a href="hetaoyuese1002ws.asp" target="_blank"><img src="tupian/banner03.jpg" width="100%"/></a></td>
  </tr>
    <tr id="idX4Y4-1" class="classX4Y4-1" style="display:none;" onMouseOver="" onMouseOut="">
<td align="center"><a href="hetaoyuese1002ct.asp" target="_blank"><img src="tupian/banner04.jpg" width="100%"/></a></td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var aa1 = document.getElementById("idX4Y1-1");
var bb1 = document.getElementById("idX4Y2-1");
var cc1 = document.getElementById("idX4Y3-1");
var dd1 = document.getElementById("idX4Y4-1");
function buzhouyidong101()
{
aa1.style.display="block";
bb1.style.display="none";
cc1.style.display="none";
dd1.style.display="none";
}
function buzhouover101()
{
aa1.style.display="block";
bb1.style.display="none";
cc1.style.display="none";
dd1.style.display="none";
}
function buzhouyidong202()
{
aa1.style.display="none";
bb1.style.display="block";
cc1.style.display="none";
dd1.style.display="none";
}
function buzhouover202()
{
aa1.style.display="none";
bb1.style.display="block";
cc1.style.display="none";
dd1.style.display="none";
}
function buzhouyidong303()
{
aa1.style.display="none";
bb1.style.display="none";
cc1.style.display="block";
dd1.style.display="none";
}
function buzhouover303()
{
aa1.style.display="none";
bb1.style.display="none";
cc1.style.display="block";


dd1.style.display="none";
}
function buzhouyidong404()
{
aa1.style.display="none";
bb1.style.display="none";
cc1.style.display="none";
dd1.style.display="block";
}
function buzhouover404()
{
aa1.style.display="none";
bb1.style.display="none";
cc1.style.display="none";
dd1.style.display="block";
}
var bbbb1 = setTimeout(buzhouyidong101,100);
var bbbb2 = setTimeout(buzhouyidong202,4000);
var bbbb3 = setTimeout(buzhouyidong303,8000);
var bbbb4 = setTimeout(buzhouyidong404,12000);
function aaaa()
{
setTimeout(buzhouyidong101,100);
setTimeout(buzhouyidong202,4000);
setTimeout(buzhouyidong303,8000);
setTimeout(buzhouyidong404,12000);
}
var cccc = setInterval(aaaa,16000);
</script>


我使用JS实现幻灯片,但遇到一个问题,请前辈指引。。。
就是怎么实现鼠标移动到滚动图片上就停止,移出图片后就接着滚动幻灯片。
[解决办法]
onmouseover="clearInterval(cccc)"
[解决办法]
这个还用自己写啊,网上源码不要太多。。
[解决办法]
你要的是这效果?
为方便测试我把图URL改了,你改回一下

<style>
#imgBox tr{ display:none}
#imgBox tr.show{ display:block}
</style>
<table id="imgBox" width="1024" border="0" align="center" cellpadding="0" cellspacing="0" class="classX4Y0-1">
  <tr id="idX4Y1-1"   class="show"   >
    <td align="center"><a href="20120815144125gsxw.asp" target="_blank"><img src="img/1.jpg" width="100%"></a></td>
  </tr>
    <tr id="idX4Y2-1"   >
<td align="center"><a href="20130320123714qyzk.asp" target="_blank"><img src="img/2.jpg" width="100%"/></a></td>
  </tr>
    <tr id="idX4Y3-1" class="classX4Y3-1" >
<td align="center"><a href="hetaoyuese1002ws.asp" target="_blank"><img src="img/3.jpg" width="100%"/></a></td>


  </tr>
    <tr id="idX4Y4-1" class="classX4Y4-1"   >
<td align="center"><a href="hetaoyuese1002ct.asp" target="_blank"><img src="img/4.jpg" width="100%"/></a></td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var spanTime=3000;
var imgBox=document.getElementById("imgBox"),
  rs=imgBox.rows,idx=0,tir,over;
tir=setInterval(function(){
if(over) return;
rs[idx].className='';
idx=++idx%rs.length;
rs[idx].className='show';
},spanTime);
imgBox.onmouseover=imgBox.onmouseout=function(evt){
evt=window.event
[解决办法]
evt;
over=evt.type=='mouseover'
}
</script>


[解决办法]
imgBox.rows 行的集合,也就是tr集合对象

热点排行
Bad Request.