我正在尝试创建一个简单的图像滑块但我在做这件事时遇到了一些麻烦 这是我目前的代码:
<div id="frame">
<div id="slider">
<div id="imageHolder">
<img src="PNGs/Desert.jpg" alt="image" />
<img src="PNGs/Lighthouse.jpg" alt="image" />
<img src="PNGs/Penguins.jpg" alt="image" />
<img src="PNGs/Hydrangeas.jpg" alt="image" />
<img src="PNGs/Koala.jpg" alt="image" />
</div>
<div id="counter"></div>
</div>
<div id="button1" style="z-index:100; position:absolute; right:-25px; top:175px; width:50px; height:35px; border-radius:200px; background-color:black; color:white; font-weight:bold; text-align:center; vertical-align:central; padding-top:15px;">right</div>
<div id="button2" style="z-index:100; position:absolute; left:-25px; top:175px; width:50px; height:35px; border-radius:200px; background-color:black; color:white; font-weight:bold; text-align:center; vertical-align:central; padding-top:15px;">left</div>
</div>
的CSS:
#frame {
margin:10px auto 0;
position:relative;
width:1000px;
height:400px;
}
#slider {
position:relative;
width:1000px;
height:400px;
background-color:red;
overflow:hidden;
}
#imageHolder {
width: 0;
height:400px;
position:relative;
}
#imageHolder img {
float:left;
width:1000px;
height:400px;
}
#counter {
display:inline-block;
z-index:100;
position:absolute;
left:10px;
bottom: 0;
}
jQuery的:
$(window).load(function () {
var count = $('#imageHolder img').length;
var itemIndex = 1;
function MoveSlider(container, count, isForwards) {
var containerName = '#' + container.toString();
if (isForwards) {
itemIndex++;
if (itemIndex < count + 1)
$(containerName).animate({ left: ((itemIndex - 1) * -100).toString() + "%" }, 2000, 'easeOutBounce');
else {
$(containerName).animate({ left: '0'}, 2000, 'easeOutBounce');
itemIndex = 1;
}
}
else {
itemIndex--;
if (itemIndex > 0)
$(containerName).animate({ left: ((itemIndex - 1) * -100).toString() + "%" }, 2000, 'easeOutBounce');
else {
$(containerName).animate({ left: (-(count - 1) * 100).toString() + '%'}, 2000, 'easeOutBounce');
itemIndex = count;
}
}
}
var counterHtml = "";
for (var i = 0; i < count; i++) {
counterHtml += "<div class=\"index\" style=\"text-align:center; vertical-align:central; color:white; display:inline-block; background-color:black;width:20px; height:20px; border-radius:200px;\">" + (i + 1) + "</div>";
}
$('#counter').html(counterHtml);
$('#imageHolder').css('width', (count * 1000).toString() + 'px');
var timer = setInterval(function () {
MoveSlider('imageHolder', count, true);
}, 5000);
$('#frame').mouseover(function () {
clearInterval(timer);
});
$('#frame').mouseleave(function () {
timer = setInterval(function () {
MoveSlider('imageHolder', count, true);
}, 5000);
});
$('.index').click(function () {
itemIndex = $('.index').index(this) + 1;
$('#imageHolder').animate({ left: ((itemIndex - 1) * -100).toString() + '%' }, 2000, 'easeOutBounce');
});
$('#button1').click(function () {
MoveSlider('imageHolder', count, true);
});
$('#button2').click(function () {
MoveSlider('imageHolder', count, false);
});
});
动画在firefox和IE10上运行顺畅,但前2或3张图片有明显滞后,我不知道如何处理它 有关我的问题的任何建议? (ps:如果您认为我可以让它变得更好,我的javascript代码的任何建议也会受到赞赏...) 提前致谢