我目前的背景图像滑块有问题。它在第一次运行时工作得很好,但第二次它在可见时将图片"撞"到右边,而不是在不可见时这样做。我希望你们中的一些人能花时间研究这个问题。将不胜感激。
我正在使用的代码:
网页部分:
<div id="logo">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
<img src="images/11.jpg">
</div>
CSS部分:
#logo img {
min-height: 100%;
width:110%;
height: 100%;
position: fixed;
top:0px;
left: 0px;
}
JavaScript:
var slideshow = 0;
var currentImageIndex = 0;
var nextImage = function () {
var $imgs = $('#logo > img');
currentImageIndex++;
if (currentImageIndex > $imgs.length) {
currentImageIndex = 1;
}
$('#logo > img:nth-child(' + currentImageIndex + ')')
.fadeIn(function () { //.fadeIn() .show()
$(this).animate({
left: '-75px'
}, 8000, 'linear')
$(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show()
$(this).css({
left: '0px'
})
})
};
点击时会触发:
$( ".hexagoncontainer7" ).click(function() {
if (slideshow == 0) {
nextImage();
slideshow=1;
}
});
这里有一些需要改进的地方。希望这会给你一个好的开始:
-
目前,您在每次调用时都会在 DOM 中搜索两次图像
nextImage()
:var $imgs = $('#logo > img');
和$('#logo > img:nth-child(' + currentImageIndex + ')')
.搜索 DOM 的计算成本很高,您应该只在必要时执行此操作。相反,如果您需要一遍又一遍地使用相同的元素(就像处理图像一样(,请选择它们一次,并将它们存储在变量中以供以后使用。
-
在以下行中:
$(this).animate({left: '-75px'}, 8000, 'linear') $(this).delay(100).fadeOut(nextImage), 1200; //.fadeOut() .show() $(this).css({left: '0px'})
有几件事需要解决。首先,第 3 行删除上一次传递的图像上留下的任何偏移。您希望此步骤位于步骤序列的开头(甚至在
fadeIn
之前(,而不是在其效果将延迟的末尾。接下来,你不需要在
fadeOut()
之前调用delay(100)
,因为animate()
允许你提供一个回调,一旦动画完成,就会调用该回调。在回调中提供淡出代码。另外,请注意,
fadeOut
首先将duration
作为参数,然后是complete
回调,即如果您希望淡出效果执行超过 1200 毫秒,则应fadeOut(1200, nextImage)
调用。最后,jQuery允许您链接函数,这将节省对jQuery函数的几次调用。
-
应考虑在第一次单击后删除
#logo
上的单击处理程序,以避免用户多次单击时出现意外行为。 -
目前,您的图像以相反的顺序堆叠在一起。您需要使用 CSS 隐藏除第一个之外的所有内容。
-
不要忘记分号并将您的函数命名为操作,即
loadNextImage
- 您的代码将更易于阅读。
这是一个包含所有更改的工作小提琴:http://jsfiddle.net/stiliyan/4bo0258p/(从伊舍伍德发布的那个分叉(
如果你想学习更多关于jQuery的最佳实践,我强烈建议你去CodeSchool的Try jQuery课程。