Javascript Jquery 图像滑块自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26155717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery image slider auto play
提问by innovation
I want to add an autoplay from my slider jquery section. What can i do this ?
我想从我的滑块 jquery 部分添加一个自动播放。我能做什么？
I have a next & a prev button but I want to add an auto-play and also when mouse hover over image that slide automatically stopped.
我有一个下一个和上一个按钮，但我想添加一个自动播放，并且当鼠标悬停在自动停止的图像上时。
Anyone can help me here ?
任何人都可以在这里帮助我吗？
This is my DEMOpage from codepen
这是我来自 codepen 的DEMO页面
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
回答by Hendry Tanaka
Modify your script like this:
像这样修改你的脚本：
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 1000, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function do_slide(){
interval = setInterval(function(){
moveLeft();
}, 1000);
}
do_slide();
$('ul li').hover(function(){
clearInterval(interval);
});
$('ul li').mouseleave(function(){
do_slide();
});
});
回答by innovation
I found the solution with this code:
我用这个代码找到了解决方案：
$(function(){
setInterval(function () {
moveRight();
}, 3000);
});
回答by Yevgeniy Afanasyev
add this to the end of your javascript code before the final "}); "
将此添加到最后的“});”之前的javascript代码末尾
var myparam1 = true;
(function(){
if (myparam1){
moveLeft();};
setTimeout(arguments.callee, 1000);
})();
$( "#slider" )
.mouseenter(function(){myparam1 = false;})
.mouseleave(function(){myparam1 = true;});
