更新：我通过设置

解决了这个问题

'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>

Answer 1

我假设在第一次动画后你没有改变对象的边距。虽然它是相同的余量，但它不是动画。在动画完成回调中，重置或恢复对象的原始边距位置。

Answer 2

不确定你的代码是什么意思，但我可以告诉你做什么......我怀疑这是你想要的......

您正在使用父<ul>元素本身并每隔3秒重复动画left-margin到-600px。当然，在第一次之后它已经 -600px ...所以-600px和-600px之间的动画在视觉上并不明显。

在那里似乎没有任何逻辑实际上抓住每个单独的图像并使其动画，移动到下一个图像，动画它等等（即典型的滑块做什么）。您似乎为实际的图像列表（imgs），列表的长度（imgLen）创建了变量，并声明了一个var来跟踪您所在的索引（current） ...这是滑块需要使用的所有数据......但实际上并没有做任何可以将数据转换为滑块的内容。

不幸的是，滑块不工作的原因是你没有编写实际制作滑块的任何东西。这不是一个我们可以指出并修复的简单错误的问题......只是不存在会在该程序中创建滑块的代码。

Answer 3

实际上问题在于您设置的代码'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);

})();

check out the fiddle

SetInterval不使用JQuery动画

更新：我通过设置

谢谢大家的帮助

3 个答案: