在mousehover上取消Jquery Slider事件 [英] Cancel Jquery Slider event on mousehover
本文介绍了在mousehover上取消Jquery Slider事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我写了下面的代码试图在mousehover上取消一个事件。我们的目标是在幻灯片正在被搁置的情况下保持幻灯片事件的发生。如果当前幻灯片悬停，是否可以取消幻灯片事件？以下是我的代码：
Jquery
< script type =text / javascript>
$（document）.ready（function（）{
var currentPosition = 0;
var slideWidth = 560;
var slides = $（'。slide'）;
var numberOfSlides = slides.length;
//删除JS
$中的滚动条（'＃slidesContainer'）.css（'overflow'，'hidden'）;
//用#slideInner div
幻灯片
.wrapAll（'< div id =slideInner>< / div>'）
//包装所有.slides重新调整.slides宽度
.css（{
'float'：'left'，
'width'：slideWidth
}）;
// Set #slideInner width等于所有幻灯片的总宽度
$（'＃slideInner'）.css（'width'，slideWidth * numberOfSlides）;
//将控件插入到DOM
$（'＃slideshow'）
.prepend（'< span class =controlid =leftControl>点击向左移动< / span>'）
.append（'< span class =controlid =rightControl>点击向右移动< / span>'）;
//在第一次加载时隐藏左箭头控件
manageControls（currentPosition）;
//为.controls创建事件侦听器clicks
'（'。control'）
.bind（'click'，function（）{
//确定新位置
currentPosition =（$（this）.attr（'id'）=='rightControl'）？currentPosition + 1：currentPosition-1;
//隐藏/显示控制
manageControls（currentPosition）;
//使用margin-left移动slideInner $ b $（'＃slideInner'）。animate（{
'marginLeft'：slideWidth *（ - currentPosition）
}）;
}）;
// manageControls：隐藏和显示控件，取决于currentPosition
函数manageControls（position）{
if（position> = 4）
{
position = 0;
currentPosition = 0;
$ b函数Aplay（）{
//确定新位置
currentPosition = currentPosition + 1;
//隐藏/显示控制
manageControls（currentPosition）;
//使用margin-left移动slideInner
$（'＃slideInner'）。animate（{$ b $'marginLeft'：slideWidth *（ - currentPosition）
}）;
setTimeout（function（）{Aplay（）;}，5000）;
}
setTimeout（Aplay（），50000）;
}）;
< / script>
HTML
< div id =slideshow>
< div id =slidesContainer>
< div class =slide>
< h2>网页开发教程< / h2>
< p>< a href =＃>< img src =img / img_slide_01.jpgalt =为Wordpress安装X A M P P的图片。 width =215height =145/>< / a>如果您正在开发Web应用程序，您应该查看名为< a href =＃>的教程。主题开发< / a>< / p>
< / div>
< div class =slide>
< h2> Grunge笔刷，任何人？< / h2>
< p>< a href =＃>< img src =img / img_slide_02.jpgwidth =215height =145alt =SR grunge Photoshop笔刷6个高分辨率的油漆刷六次修订。 />< / a>在此布局中，我使用< a href =＃> SR Grunge< / a>，< / p>
< p>
< / div>
< div class =slide>
< h2>一些真棒垃圾贴图怎么样？< / h2>
< p>< a href =＃>< img src =img / img_slide_03.jpgwidth =215height =145alt = 15个免费的高分辨率垃圾纹理六个版本。 />< / a>此网页中使用的纹理来自JC Parmley在Six Revisions上发布的Grunge Extreme Textures免费赠品。< / p>
< p>您可以前往< a href =＃> Grunge Extreme< / a>页面下载纹理集或签出SixRevisions'< a href =＃>免费赠品部分< / a>获得更多好消息！< / p>
< / div>
< div class =slide>
< h2>'Tis the End，My Friend。< / h2>
< p>< a href =＃>< img src =img / img_slide_04.jpgwidth =215height =145alt =缩略图，连接到Photoshop教程的Photoshop。 />< / A>< / p为H.
< p>网页界面。< / p>
< / div>
< / div>
< / div>
<！ - 幻灯片HTML - >
< / div>
解决方案
用下面的代码替换Javascript底部： p>
var timeout = null;
函数Aplay（）{
//确定新位置
currentPosition = currentPosition + 1;
//隐藏/显示控制
manageControls（currentPosition）;
//使用margin-left移动slideInner
$（'＃slideInner'）。animate（{$ b $'marginLeft'：slideWidth *（ - currentPosition）
}）;
timeout = setTimeout（function（）{Aplay（）;}，5000）;
}
timeout = setTimeout（function（）{Aplay（）;}，5000）;
$ b $（'＃slideshow'）。hover（function（）{
clearTimeout（timeout）;
}，function（）{
timeout = setTimeout（function （）{Aplay（）;}，5000）;
}）;
Exaplanation：
创建一个变量超时将包含 setTimeout 事件
$（'slideshow'）。 hover（...）会在鼠标悬停时停止事件，然后在鼠标退出幻灯片时重新将其分配给 timeout / p>
编辑
OP针对以下评论提出的问题的解决方案： p>
在html中添加：
< span id =编号大于1< /跨度>
在JS中添加这个函数：
function updateNumber（）{
$（'＃numbering'）。text（（+ $（'＃numbering'）。text（））％4 + 1）;
}
然后在涉及图片滑动的函数中调用它，所以当文字点击和自动滑动时。
I wrote the following code to attempt to cancel an event on mousehover. the goal is to keep the slide event from happening if a slide is currently being hovered. Is it possible to cancel the slide event if the current slide is being hovered? Here is my code:
Jquery
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},5000);
}
setTimeout(Aplay(),50000);
});
</script>
HTML
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2>Web Development Tutorial</h2>
<p><a href="#"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="#">Using XAMPP for Local WordPress Theme Development</a>"</p>
</div>
<div class="slide">
<h2>Grunge Brushes, Anyone?</h2>
<p><a href="#"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="#">SR Grunge</a>,</p>
<p>
</div>
<div class="slide">
<h2>How About Some Awesome Grunge Textures?</h2>
<p><a href="#"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
<p>You can head over to the <a href="#">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="#">freebie section</a> for even more goodies!</p>
</div>
<div class="slide">
<h2>'Tis the End, My Friend.</h2>
<p><a href="#"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutorial." /></a></p>
<p> web interface.</p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
解决方案
Replace the Javascript bottom part with this code:
var timeout = null;
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
timeout = setTimeout(function(){Aplay();},5000);
}
timeout = setTimeout(function(){Aplay();},5000);
$('#slideshow').hover(function(){
clearTimeout(timeout);
},function(){
timeout = setTimeout(function(){Aplay();},5000);
});
Exaplanation:
create a variable called timeout that will contain the setTimeout event
The $('slideshow').hover(...) will stop the event when the mouse is over it, then will re assign it to timeout when mouse exit the slideshow
Edit
Solution for the question by OP on the comments below:
Add this in the html:
<span id="numbering">1</span>
Add this functions in JS:
function updateNumber(){
$('#numbering').text((+$('#numbering').text())%4 + 1);
}
Then call it in the functions that are involved with the sliding of the images, so when text clicked and when automatically sliding.
这篇关于在mousehover上取消Jquery Slider事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
