SetInterval无法使用JQuery动画

SetInterval not Working with JQuery animation

本文关键字：JQuery 动画 SetInterval      更新时间：2023-09-26

我正在尝试创建一个滑块。滑块坏了，我不知道为什么。它只被调用一次。

animate方法只调用一次。我记录了对Interval的调用，调用了Interval，但在第一次之后没有调用animate**

更新：我只需设置就解决了问题

动画方法中的"margin left"：-="600px"

谢谢大家的帮助

**

Slider2.js CSS和HTML

function(){
		var sliderUL = $('div.slider').css('overflow','hidden').children('ul'),
			imgs = sliderUL.find('img'),
			imgWidth = imgs[0].width,
			imgLen = imgs.length;
			current = 1;
			total_img_width = imgLen * imgWidth;
			
			setInterval(function(){
				console.log("log invoked");
				sliderUL.delay(1000).animate({'margin-left': '-600px'},1000);
			},3000);
			
})();
.slider {
	width: inherit;
	height: 300px;
	overflow: hidden;
	
}
.slider ul {
	/* width:10000px; */
	list-style: none;
	display:flex;
}
.slider li {
	float: left;
}
<!doctype html>
<html>
<head>
	<meta charset=utf-8>
	<title>The Obligatory Slider</title>
	<style>
	body {
		width: 600px;
		margin: 100px auto 0;
	}
	* { margin: 0; padding: 0; }
	</style>
	<link rel="stylesheet" href="slider.css">
</head>
<body>
<div class="slider">
	<ul>
		
		<li><img src="img/img1.jpg" alt="image"></li>
		<li><img src="img/img2.jpg" alt="image"></li>
		<li><img src="img/img3.jpg" alt="image"></li>
		<li><img src="img/img4.jpg" alt="image"></li>
		<li><img src="img/img5.jpg" alt="image"></li>
	</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="slider.js"></script>

实际上问题出在您设置'margin-left': '-600px'的代码中总是这样，即使它被执行，余量也保持不变。我对代码做了一点修改，现在它正在工作。

var count = 1;
(function(){
    var sliderUL = $('div.slider').css('overflow','hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width,
    imgLen = imgs.length;
    current = 1;
    total_img_width = imgLen * imgWidth;
    setInterval(function(){
        console.log("log invoked");
        sliderUL.delay(1000).animate({'margin-left': '-'+(count*600)+'px'},1000);
        count = (count+1)%5;
        if(count == 0)
           count++;
    },3000);
})();

查看小提琴

我假设，在第一个动画之后，您不会更改对象的边距。虽然它是相同的边距，但它没有设置动画。在动画完成回调中，重置或重新激活原始边距位置的对象。

不确定代码的意图，但我可以告诉您它在做什么。。。我怀疑这是你想要的。。。

您正在获取父<ul>元素本身，并每隔3秒重复设置其left-margin到-600px的动画。当然，在第一次之后，它已经在-600px。。。所以CCD_ 6和CCD_。。。

似乎没有任何逻辑可以真正抓取每个单独的图像并对其进行动画化，移动到下一个图像并对它进行动画化等（即典型的滑块所做的）。您似乎为实际的图像列表（imgs）、该列表的长度（imgLen）创建了变量，并声明了一个var来跟踪您所在的索引（current）。。。这就是滑块需要使用的所有数据。。。但你实际上并没有做任何能把数据变成滑块的事情。

不幸的是，滑块不起作用的原因是，您没有编写任何能够真正制作滑块的代码。这不是一个简单的错误，我们可以指出并修复。。。根本没有代码可以在该程序中创建滑块。

相关文章：