如何暂停和恢复旋转木马滑块
How to pause and resume carousel slider
我试图让滑块在用户悬停时暂停,然后在用户悬停时恢复旋转。但由于某些原因,当我悬停时动画变得很奇怪当我悬停在上方时,clearartimeout不再工作了。
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>
已更新小提琴
$('#carosuel').hover(function()
{
clearTimeout(timer);
},function()
{
timer = setTimeout(function()
{
mycode.rotateCarousel();
}, 5000);
});
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 禁用旋转木马中的下一个按钮和上一个按钮
- 旋转木马;启用内容安全策略时无法工作
- 在引导程序旋转木马中显示下一个图像
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 猫头鹰旋转木马宽度计算错误
- 猫头鹰旋转木马动画未在Chrome中应用
- 猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
- 在Javascript中设置多个小图像(如旋转木马)
- 如何使引导旋转木马保持图像纵横比
- 使用旋转木马在元素上切换类
- 将图像传递到Angular UI引导旋转木马
- 当ons惰性重复检测到更改时,如何使用ons旋转木马刷新列表
- 猫头鹰旋转木马2-拖动方向
- 带有JQuery和CSS的3D旋转木马-渲染不正确
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- Bootstrap 3旋转木马/滑块IE9支持
- Ruby on Rails - 引导旋转木马按钮不起作用
- Sencha Touch 2-选项卡面板中的旋转木马
- 如何暂停和恢复旋转木马滑块