问题描述
限时送ChatGPT账号..所以我使用以下脚本为滑动内容创建幻灯片.我想知道为此添加悬停暂停"功能的最简单代码是什么.因此,当用户将鼠标指针聚焦在整个滑动 div 上时,它将暂停幻灯片放映并且 - 一旦再次删除恢复?...
$(document).ready(function() {var currentPosition = 0;var 幻灯片宽度 = 500;var 幻灯片 = $('.slide');var numberOfSlides = slides.length;var slideShowInterval;无功速度 = 3000;//分配一个定时器,让它定期运行slideShowInterval = setInterval(changePosition, speed);slides.wrapAll('<div id="slidesHolder"></div>')幻灯片.css({ '浮动' : '左' });//设置#slidesHolder宽度等于所有幻灯片的总宽度$('#slidesHolder').css('width', slideWidth * numberOfSlides);$('#幻灯片').prepend('<span class="nav" id="leftNav">向左移动</span>').append('<span class="nav" id="rightNav">向右移动</span>');管理导航(当前位置);//告诉按钮点击时做什么$('.nav').bind('click', function() {//确定新位置currentPosition = ($(this).attr('id')=='rightNav')?currentPosition+1 : currentPosition-1;//隐藏/显示控件管理导航(当前位置);clearInterval(slideShowInterval);slideShowInterval = setInterval(changePosition, speed);移动滑动();});功能管理导航(位置){//如果位置是第一张幻灯片,则隐藏左箭头if(position==0){ $('#leftNav').hide() }else { $('#leftNav').show() }//隐藏向右箭头是幻灯片位置是最后一张幻灯片if(position==numberOfSlides-1){ $('#rightNav').hide() }else { $('#rightNav').show() }}/*changePosition:当幻灯片被移动时调用计时器而不是点击下一个或上一个按钮时*/函数更改位置(){if(currentPosition == numberOfSlides - 1) {当前位置 = 0;管理导航(当前位置);} 别的 {当前位置++;管理导航(当前位置);}移动滑动();}//moveSlide: 这个函数移动幻灯片函数移动滑动(){$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});}});
和 html...
<div id="slideshowWindow"><div class="slide"><img src="slide1.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 1</h2><p class="slideDes">Lorem ipsum dolor 坐 amet,consectetur adipisicing elit, sed do eiusmod temporincididunt ut laboure et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--><div class="slide"><img src="slide2.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 2</h2><p class="slideDes">Lorem ipsum dolor 坐 amet,consectetur adipisicing elit, sed do eiusmod temporincididunt ut laboure et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--><div class="slide"><img src="slide3.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 3</h2><p class="slideDes">Lorem ipsum dolor 坐 amet,consectetur adipisicing elit, sed do eiusmod temporincididunt ut Labore et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--></div><!--/slideshowWindow--></div><!--/slideshow-->
和CSS...
#slideshow #slideshowWindow {宽度:500px;高度:257px;保证金:0;填充:0;位置:相对;溢出:隐藏;}#slideshow #slideshowWindow .slide {保证金:0;填充:0;宽度:500px;高度:257px;位置:相对;}#slideshow #slideshowWindow .slide .slideText {位置:绝对;顶部:130px;左:0px;宽度:100%;高度:130px;背景图像:网址(greyBg.png);背景重复:重复;保证金:0;填充:0;颜色:#ffffff;字体系列:Myriad Pro、Arial、Helvetica、sans-serif;}#slideshow #slideshowWindow .slide .slideText a:link,#slideshow #slideshowWindow .slide .slideText a:visited {颜色:#ffffff;文字装饰:无;}#slideshow #slideshowWindow .slide .slideText h2,#slideshow #slideshowWindow .slide .slideText p {边距:10px 0 0 10px;填充:0;}
我的原始代码来自:http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php
解决方案鼠标进入时,清除间隔
$('#slideshow').mouseenter(function(){clearInterval(slideShowInterval);});
当鼠标离开时,重新开始间隔
$('#slideshow').mouseleave(function(){slideShowInterval = setInterval(changePosition, speed);});
工作 fiddle
So I am using the following script to create a slideshow for sliding content. I am wondering what is the simplest code to add 'pause on hover' functionality to this. So that when a user focuses his mouse pointer on the whole sliding div it will pause the slideshow and - once removed resume again?...
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideshow')
.prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.nav').bind('click', function() {
//determine new position
currentPosition = ($(this).attr('id')=='rightNav')
? currentPosition+1 : currentPosition-1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if(position==0){ $('#leftNav').hide() }
else { $('#leftNav').show() }
//hide right arrow is slide position is last slide
if(position==numberOfSlides-1){ $('#rightNav').hide() }
else { $('#rightNav').show() }
}
/*changePosition: this is called when the slide is moved by the
timer and NOT when the next or previous buttons are clicked*/
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
and the html...
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="slide1.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 1</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
<div class="slide">
<img src="slide2.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 2</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
<div class="slide">
<img src="slide3.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 3</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
</div><!--/slideshowWindow-->
</div><!--/slideshow-->
and the css...
#slideshow #slideshowWindow {
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:500px;
height:257px;
position:relative;
}
#slideshow #slideshowWindow .slide .slideText {
position:absolute;
top:130px;
left:0px;
width:100%;
height:130px;
background-image:url(greyBg.png);
background-repeat:repeat;
margin:0;
padding:0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited {
color:#ffffff;
text-decoration:none;
}
#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
margin:10px 0 0 10px;
padding:0;
}
I got the origanal code from: http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php
解决方案When the mouse enters, clear the interval
$('#slideshow').mouseenter(function(){
clearInterval(slideShowInterval);
});
And when the mouse leaves, re-start the interval
$('#slideshow').mouseleave(function(){
slideShowInterval = setInterval(changePosition, speed);
});
working fiddle
这篇关于jquery 在悬停时暂停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论