Javascript 如何暂停和恢复转盘滑块
我试图让滑块在用户悬停时暂停,然后在用户悬停时恢复旋转。但由于某些原因,当我悬停在外时,动画会变得古怪,当我将鼠标悬停在clearTimeout上时,动画不再工作。我正在努力做到这一点没有插件请Javascript 如何暂停和恢复转盘滑块,javascript,jquery,slider,carousel,Javascript,Jquery,Slider,Carousel,我试图让滑块在用户悬停时暂停,然后在用户悬停时恢复旋转。但由于某些原因,当我悬停在外时,动画会变得古怪,当我将鼠标悬停在clearTimeout上时,动画不再工作。我正在努力做到这一点没有插件请 mycode.carousel = function() { //hide all slides except first slide $('#slides_container > div:gt(0)').hide(); $('#controls a').first().addClass('act
mycode.carousel = function() {
//hide all slides except first slide
$('#slides_container > div:gt(0)').hide();
$('#controls a').first().addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
//auto rotate start
var timer = setTimeout(function() {
mycode.rotateCarousel();
}, 1000);
$('#controls a').on('click',function(){
//remove active from all thumbnails
$('#controls a').removeClass('active');
//remove current instance of current slide indicator
$('#active_slide').remove();
//add current slide indicator to new tmb
$(this).addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
//stop slide rotation
//clearTimeout(timer);
//select slide that corresponds to
var slideto_num = $(this).data('slide-to');
$('#slides_container').children('div:visible').fadeOut();
$('#slides_container > div:eq('+ slideto_num +')').fadeIn();
});
}
mycode.rotateCarousel = function() {
var $slides = $('#slides_container');
var $current = $slides.children('div:visible');
var $next = $current.next();
var data = $next.data('slide');
var element = [];
var $tmbs = $('#controls a');
$tmbs.each(function(i,item){
element[i] = $(item);
});
$('#controls a').removeClass('active');
$('#active_slide').remove();
//assign first slide as $next when reaches end of list
if ($next.length == 0) {
$next = $slides.children('div:eq(0)');
element[0].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
} else {
element[data].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
}
$current.fadeOut();
$next.fadeIn();
var timer = setTimeout(function() {
mycode.rotateCarousel();
}, 1000);
$('#carosuel').hover(function(){
clearTimeout(timer);
}, function() {
mycode.rotateCarousel();
});
}
这是html
<section id="carosuel" class="col-7">
<div id="slides_container">
<!-- slide 1 -->
<div data-slide="0">
<div class="position-relative">
<img src="img/slide1.jpg" alt="" />
<blockquote class="captions">
<h2>Downtown Baltimore</h2>
Check out the USS Torsk at Baltimore's historic Maritime Museum.
</blockquote>
</div>
</div>
<!-- slide 2 -->
<div data-slide="1">
<div class="position-relative">
<img src="img/slide2.jpg" alt="" />
<blockquote class="captions">
<h2>Exploring the Venetian</h2>
Enjoy the best gondola ride on this side of the Atlantic Ocean.
</blockquote>
</div>
</div>
<!-- slide 3 -->
<div data-slide="2">
<div class="position-relative">
<img src="img/slide3.jpg" alt="" />
<blockquote class="captions">
<h2>London after dark</h2>
Enjoy the pubs along the river Thames & get spectacular view from the London Eye.
</blockquote>
</div>
</div>
<!-- slide 4 -->
<div data-slide="3">
<div class="position-relative">
<img src="img/slide4.jpg" alt="" />
<blockquote class="captions">
<h2>Mount Rushmore</h2>
Marvel at the majestic beauty of the Black Hills and come face to face with American history.
</blockquote>
</div>
</div>
</div>
<div id="controls">
<a data-slide-to="0"><img src="img/tmb1.jpg" alt="" /></a>
<a data-slide-to="1"><img src="img/tmb2.jpg" alt="" /></a>
<a data-slide-to="2"><img src="img/tmb3.jpg" alt="" /></a>
<a data-slide-to="3" class="last"><img src="img/tmb4.jpg" alt="" /></a>
</div>
</section>
更新
你能告诉我你用的是哪种外部JS吗?请给我提琴我有点搞不清楚如何得到当前可见的幻灯片值,然后在鼠标上初始化它。它不是已经用$next声明了吗?var$current=$slides.children'div:visible';将此变量设为全局。。在mouseover和mouseout时获取可见div的id在mouseout中声明它并使用$current.nextU通过调用函数内部将其放错位置。。把它放在函数之外。。
$('#carosuel').hover(function()
{
clearTimeout(timer);
},function()
{
timer = setTimeout(function()
{
mycode.rotateCarousel();
}, 5000);
});