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

qq_448571358 2013-08-03 10:30:32



<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实现幻灯片，但遇到一个问题，请前辈指引。。。
就是怎么实现鼠标移动到滚动图片上就停止，移出图片后就接着滚动幻灯片。

...全文

262 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_448571358 2013-08-31

打赏
举报

问题解决，结贴并给分。

fzfei2 2013-08-30

打赏
举报

imgBox.rows 行的集合，也就是tr集合对象

qq_448571358 2013-08-30

打赏
举报

#8楼你这个方法我测试了，可行，我研究了下，有一句没看懂， rs=imgBox.rows,idx=0,tir,over; 这句的imgBox.rows是啥意思呢？

qq_448571358 2013-08-30

打赏
举报

#10楼加加你QQ好吗？

fzfei2 2013-08-28

打赏
举报

你要的是这效果? 为方便测试我把图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>

qq_448571358 2013-08-28

打赏
举报

求助。。。。。。

qq_448571358 2013-08-10

打赏
举报

我没有找到纯javascript脚本的源码哦，请指引哦，

booland520 2013-08-10

打赏
举报

这个还用自己写啊，网上源码不要太多。。

qq_448571358 2013-08-08

打赏
举报

真心请路过的前辈帮帮俺分析分析，给与思路或代码，先谢谢啊。

qq_448571358 2013-08-06

打赏
举报

我想实现幻灯片功能，自动换图，当鼠标移动到图上时停止换图，当移出图片时，接着换下一张图。想到目前为止还没想出思路呢，请路过的前辈指点指点，很感谢！

qq_448571358 2013-08-05

打赏
举报

版主，我修改了下，发现一个严重问题，想到目前为止还没想出思路呢，请路过的前辈指点指点，很感谢！


<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);
}
//aaaa();
var cccc = setInterval(aaaa,16000);
function dddd1()
{
clearInterval(cccc)
}
function dddd2()
{
clearTimeout(bbbb1);
clearTimeout(bbbb2);
clearTimeout(bbbb3);
clearTimeout(bbbb4);
clearInterval(cccc);
buzhouover202();
}
function dddd3()
{
clearTimeout(bbbb1);
clearTimeout(bbbb2);
clearTimeout(bbbb3);
clearTimeout(bbbb4);
clearInterval(cccc);
buzhouover303();
}
function dddd4()
{
clearTimeout(bbbb1);
clearTimeout(bbbb2);
clearTimeout(bbbb3);
clearTimeout(bbbb4);
clearInterval(cccc);
buzhouover404();
}
function eeee1()
{
bbbb2 = setTimeout(buzhouover202,4000);
bbbb3 = setTimeout(buzhouover303,8000);
bbbb4 = setTimeout(buzhouover404,12000);
cccc = setInterval(aaaa,16000);
}
function eeee2()
{
bbbb1 = setTimeout(buzhouover101,12000);
bbbb3 = setTimeout(buzhouover303,4000);
bbbb4 = setTimeout(buzhouover404,8000);
cccc = setInterval(aaaa,16000);
}
function eeee3()
{
//bbbb1 = setTimeout(buzhouover101,4000);
//bbbb2 = setTimeout(buzhouover202,6000);
bbbb4 = setTimeout(buzhouover404,4000);
cccc = setInterval(aaaa,8000);
}
function eeee4()
{
//bbbb1 = setTimeout(buzhouover101,4000);
//bbbb2 = setTimeout(buzhouover202,6000);
bbbb1 = setTimeout(buzhouover101,2000);
cccc = setInterval(aaaa,4000);
}
</script>