jquery焦点图轮播
看了网上代码后自己写的焦点图但是发现在mouseover那边出现了重复计算的问题会不停地调用showpic函数，不知道应该怎么改，求教<!DOCTYPEhtml><htm...
看了网上代码后自己写的焦点图 但是发现在mouseover那边出现了重复计算的问题 会不停地调用showpic函数，不知道应该怎么改，求教
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src='js/index.js'></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="slider">
<div id="slider_img">
<a href=""><img src="img/2.jpg" alt=""></a>
<a href=""><img src="img/3.jpg" alt=""></a>
<a href=""><img src="img/4.jpg" alt=""></a>
<a href=""><img src="img/1.jpg" alt=""></a>
</div>
<div id="slider_btn">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</body>
</html>
jQuery：
$(function(){
var n=0,t;
var len=$('#slider_img a').length;
function showbtn(n){
$('#slider_btn a').each(function(){$(this).css('background-color','transparent')});
$('#slider_btn a').eq(n).css('background-color','white');
};
function showpic(n){
$("#slider_img a").fadeOut(500).eq(n).fadeIn(400);
};
$('#slider_btn li').mouseover(
function(){
n=$(this).index();
showpic(n);
showbtn(n);
n++;
if(n == len) {n = 0;}
});
$('#slider').hover(
function(){clearInterval(t)},
function(){
t=setInterval(function(){
showpic(n);
showbtn(n);
n++;
if(n == len) {n = 0;}
},5000);
}
).trigger('mouseleave');
}) 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src='js/index.js'></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="slider">
<div id="slider_img">
<a href=""><img src="img/2.jpg" alt=""></a>
<a href=""><img src="img/3.jpg" alt=""></a>
<a href=""><img src="img/4.jpg" alt=""></a>
<a href=""><img src="img/1.jpg" alt=""></a>
</div>
<div id="slider_btn">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</body>
</html>
jQuery：
$(function(){
var n=0,t;
var len=$('#slider_img a').length;
function showbtn(n){
$('#slider_btn a').each(function(){$(this).css('background-color','transparent')});
$('#slider_btn a').eq(n).css('background-color','white');
};
function showpic(n){
$("#slider_img a").fadeOut(500).eq(n).fadeIn(400);
};
$('#slider_btn li').mouseover(
function(){
n=$(this).index();
showpic(n);
showbtn(n);
n++;
if(n == len) {n = 0;}
});
$('#slider').hover(
function(){clearInterval(t)},
function(){
t=setInterval(function(){
showpic(n);
showbtn(n);
n++;
if(n == len) {n = 0;}
},5000);
}
).trigger('mouseleave');
}) 展开
展开全部
mouseover时清除一下计时器，并不需要调用showpic(n)。因为你鼠标悬浮是想要停止自动切换。clearTimeout(t)；
再帮一个moverout事件，里鼠标移出重新开始计数器。
再帮一个moverout事件，里鼠标移出重新开始计数器。
追问
定时器在后面的hover事件里写了 只要鼠标在slider里面定时器都会停止
问题是我mouseover的时候通过index来获得当前索引的值，然后用这个索引触发showpic
怎么写来判断当前的mouseover得出的索引值和当前所展现的图片的索引值是否相等
来避免比如说当前已经运行过showpic（1），鼠标移上去又运行一次showpic（1）？
追答
好吧，看漏了！
$("#slider_img>a").index($("#slider_img>a:visible"))
这个可以返回当前显示元素相应的位置
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述，字数在200字左右：该组件支持用户之间的私密交流，让沟通更加直接和高效。通过它，您可以向特定对象发送消息，并实时查看消息状态，包括对方是否已读或未读。同时，该组件还支持富文本消息...
点击进入详情页
本回答由网易云信提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
