-_-! 鼠标悬停 图片不停止?

认真为自己 2009-09-05 06:51:44
var j=1, timerID = 0;
function _start(){
var divs = $("#ppt_image div");
alert(divs[1]);//输出undefined
alert(divs.length);//输出0
timerID = setInterval("tupian()", 3500);
for(var i=0; i<divs.length; i++){
divs.onmouseover = function(){
clearInterval(timerID);
};
divs.onmouseout = function(){
timerID = setInterval("tupian()", 3500);
};
}
}

//以下可以正常执行图片可以自动跳转!

function tupian(){
var img=$("#image"+j).attr("img");
$("#button"+j).addClass("button"+j+"_3");
$("#text"+j).fadeIn("slow");
img="url('"+img+"')";
$("#image"+j).css({background:img,"width":"500px","height":"230px"}).fadeIn("slow");
for(var i=1;i<=6;i++){
if (j!=i){
$("#button"+i).removeClass("button"+i+"_3");
$("#image"+i).removeAttr("style");
$("#text"+i).hide();
}
}
j = j < 6 ? j + 1 : 1;
}
tupian();
_start();


//图片可以自动跳转,但是鼠标悬停后图片仍然跳转!
//请高手帮忙解决!
//还有就是我做的这个幻灯片这浏览器打开后会加载很多效果! ie6会崩溃关闭 如何解决!
//求教
...全文
172 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 zswang 的回复:]
纯的jquery是这样写的。
HTML code<html><head><scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head><body><divid="ppt_image"><divid="image1" class="image_pg1">1</div><divid="image2" class="image_pg1">2</div><divid="image3" class="image_pg1">3</div><divid="image4" class="image_pg1">4</div><divid="image5" class="image_pg1">5</div><divid="image6" class="image_pg1">6</div></div><scripttype="text/javascript">
$("#ppt_image div").mouseover(function() {
document.title="mouseover:"+this.id;
}).mouseout(function() {
document.title="mouseout:"+this.id;
});</script></body></html>
[/Quote]

我知道这种方法!
我之所以用function(){}这种方法 是因为我对JQ还不是很熟悉 有些我不知道如何实现!

但是我将原先应用的JS的鼠标悬停效果应用到这里后 效果出不来 不知道是什么原因

如果对问题感兴趣解决我可以发完整代码
fuabc81 2009-09-06
  • 打赏
  • 举报
 回复
分粉粉粉粉粉粉粉
fuabc81 2009-09-06
  • 打赏
  • 举报
 回复
分分分分分
王集鹄 2009-09-06
  • 打赏
  • 举报
 回复
纯的jquery是这样写的。
<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>

<body>

	<div id="ppt_image">

		<div id="image1" class="image_pg1">1</div>

		<div id="image2" class="image_pg1">2</div>

		<div id="image3" class="image_pg1">3</div>

		<div id="image4" class="image_pg1">4</div>

		<div id="image5" class="image_pg1">5</div>

		<div id="image6" class="image_pg1">6</div>

	</div> 

	<script type="text/javascript">

	$("#ppt_image div").mouseover(function() {

		document.title = "mouseover:" + this.id;

	}).mouseout(function() {

		document.title = "mouseout:" + this.id;

	});

	</script>

</body>

</html>
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 zswang 的回复:]
如果alert(divs[1])不为undefined了，，，那么没有加下标：
[/Quote]

var divs = $("#ppt_image div");

alert(divs[1]);          //输出还是undefined

alert(divs.length);      //输出0


如果var divs = $("#ppt_image div");没有写错 这是什么问题!
#ppt_image ID没有重名!
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 sohighthesky 的回复:]
JScript code var divs= $("#ppt_image div");应该没错，看看ID是否重名了
[/Quote]

ID没有重名!
var divs= $("#ppt_image div");这句没有错那是哪里出问题了?

    var j=1, timerID = 0;

    function _start(){

        var divs = $("#ppt_image div");

        timerID = setInterval("tupian()", 3500);

        for(var i=0; i<divs.length; i++){

            divs[i].onmouseover = function(){

                clearInterval(timerID);

            };

            divs[i].onmouseout = function(){

				if(timerID) clearInterval(timerID); 

                timerID = setInterval("tupian()", 3500);

            };

        }

    }

//以下可以实现图片跳转

    function tupian(){

		var img=$("#image"+j).attr("img");

		$("#button"+j).addClass("button"+j+"_3");

		$("#text"+j).fadeIn("slow");

		img="url('"+img+"')";

		$("#image"+j).css({background:img,"width":"500px","height":"230px"}).fadeIn("slow");				

		for(var i=1;i<=6;i++){

			if (j!=i){

				$("#button"+i).removeClass("button"+i+"_3");

				$("#image"+i).removeAttr("style");

				$("#text"+i).hide();

			}

		}

        j = j < 6 ? j + 1 : 1;

    }

    tupian();

    _start();
王集鹄 2009-09-06
  • 打赏
  • 举报
 回复
如果alert(divs[1])不为undefined了，，，那么没有加下标：

for(var i=0; i <divs.length; i++){
divs[i].onmouseover = function(){
clearInterval(timerID);
};
divs[i].onmouseout = function(){
timerID = setInterval("tupian()", 3500);
};
}
sohighthesky 2009-09-06
  • 打赏
  • 举报
 回复 

var divs = $("#ppt_image div");
应该没错，看看ID是否重名了
sohighthesky 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 sujunlin_1987 的回复:]
jquery 还不是很熟! 在一点一点学习中!

还需要粘什么?
这句写错了么var divs = $("#ppt_image div");请指教!

<div id="ppt_image">
<div id="image1" class="image_pg1" img="./upload/ppt/ppt_1.jpg"> </div>
<div id="image2" class="image_pg1" img="./upload/ppt/ppt_2.jpg"> </div>
<div id="image3" class="image_pg1" img="./upload/ppt/ppt_3.jpg"> </div>
<div id="image4" class="image_pg1" img="./upload/ppt/ppt_4.jpg"> </div>
<div id="image5" class="image_pg1" img="./upload/ppt/ppt_5.jpg"> </div>
<div id="image6" class="image_pg1" img="./upload/ppt/ppt_6.jpg"> </div>
</div>

[/Quote]

何必要用for循环，，，JQuery了还不each
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
jquery 还不是很熟! 在一点一点学习中!

还需要粘什么?
这句写错了么var divs = $("#ppt_image div"); 请指教!

<div id="ppt_image">
<div id="image1" class="image_pg1" img="./upload/ppt/ppt_1.jpg"></div>
<div id="image2" class="image_pg1" img="./upload/ppt/ppt_2.jpg"></div>
<div id="image3" class="image_pg1" img="./upload/ppt/ppt_3.jpg"></div>
<div id="image4" class="image_pg1" img="./upload/ppt/ppt_4.jpg"></div>
<div id="image5" class="image_pg1" img="./upload/ppt/ppt_5.jpg"></div>
<div id="image6" class="image_pg1" img="./upload/ppt/ppt_6.jpg"></div>
</div>
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
setTimeout ("$(document).ready",1000 );

这样写么?
rjzou2006 2009-09-06
  • 打赏
  • 举报
 回复
总之，你页面加载太了吧。
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 rjzou2006 的回复:]
-------------

还有就是我做的这个幻灯片这浏览器打开后会加载很多效果! ie6会崩溃关闭 如何解决!

----
是你ready里面加载的东西太多。

试着减少ready里面一次加载的数据。

可以setTimeout的啊。
[/Quote]

比如说我在页面加载的时候创建

$("#ppt_button div:first").addClass("button1_3");

如果应用setTimeout(code,millisec);
设置毫秒执行! setTimeout只执行一次 那和直接执行有什么区别?
$("#ppt_button div:first").addClass("button1_3");

$(document).ready(function() { }); 中加载的代码会重复执行?

应用的写法是否正确?
setTimeout($("#ppt_button div:first").addClass("button1_3"),1000);
rjzou2006 2009-09-06
  • 打赏
  • 举报
 回复
将
tupian();
_start();

放到
$(document).ready(function() { });

里面。


-------------

还有就是我做的这个幻灯片这浏览器打开后会加载很多效果! ie6会崩溃关闭 如何解决!

----
是你ready里面加载的东西太多。

试着减少ready里面一次加载的数据。

可以setTimeout的啊。

认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 rjzou2006 的回复:]
var divs = $("#ppt_image div");


这个就是问题啊。
[/Quote]

怎么改呀?
rjzou2006 2009-09-06
  • 打赏
  • 举报
 回复
var divs = $("#ppt_image div");


这个就是问题啊。
rjzou2006 2009-09-06
  • 打赏
  • 举报
 回复
var divs = $("#ppt_image div");
认真为自己 2009-09-06
  • 打赏
  • 举报
 回复
演示地址
http://210.56.192.43/test123/

有耐心请高手帮忙解决
王集鹄 2009-09-05
  • 打赏
  • 举报
 回复
另外，用了jquery框架？用得不纯哇。
王集鹄 2009-09-05
  • 打赏
  • 举报
 回复
demo都不贴全。“alert(divs[1]);//输出undefined”还玩啥，事件都没赋值上。
加载更多回复（2）
css3 transform旋转属性鼠标悬停3D立体图片旋转显示
css3 transform旋转属性鼠标悬停3D立体图片旋转显示 css3 transform旋转属性鼠标悬停3D立体图片旋转显示
js实现鼠标经过时图片滚动停止的方法
本文实例讲述了js实现鼠标经过时图片滚动停止的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
jQuery图片左右滑动鼠标悬停放大效果特效代码
jQuery图片左右滑动鼠标悬停放大效果是一个非常简洁易用的jQuery图片放大效果，主要使用jQuery的animate方法实现 没有使用css3代码，支持左右点击滚动，兼容主流浏览器
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。 效果图： 上干货 html： 代码如下: ”news”> <ul> <li><a>aaaaaaaaaaaaaaa</a></li> ...
jquery实现鼠标悬浮停止轮播特效
主要介绍了jquery实现鼠标悬浮停止轮播特效，鼠标悬停在图片上则停止轮播，感兴趣的小伙伴们可以参考一下
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章