[英]Jquery image slider auto play
I want to add an autoplay from my slider jquery section. 我想从滑块jquery部分添加自动播放。 What can i do this ?
我该怎么办?
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 DEMO page 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();
});
});
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();
});
});
I found the solution with this code: 我用以下代码找到了解决方案:
$(function(){
setInterval(function () {
moveRight();
}, 3000);
});
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;});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.