我有一个工作图像滑块。
var sliderIndex = 0; // start with the first image
var autoSlideHandler; // for the reset
var activeDuration = 3000; // each picture is active for 3 seconds
startImageSlider();
function startImageSlider() { // Initialize the slider
sliderIndex++;
updateImageSlider();
autoSlideHandler = setTimeout(startImageSlider, activeDuration);
}
function changeSliderImage(direction) { // change images manually by pressing the buttons
sliderIndex += direction;
updateImageSlider();
clearTimeout(autoSlideHandler);
autoSlideHandler = setTimeout(startImageSlider, activeDuration);
}
function updateImageSlider() { // switch the images
var sliderImages = $(".sliderImg");
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none"; // hide the current image
}
if (sliderIndex > sliderImages.length) {
sliderIndex = 1;
}
else if (sliderIndex < 1) {
sliderIndex = sliderImages.length;
}
sliderImages[sliderIndex - 1].style.display = "block"; // show the next image
}
#containerImageSlider {
width: 200px;
height: 100px;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(25%);
}
.sliderImg{
width: 100%;
height: 100%;
}
.sliderBtn {
width: 64px;
height: 64px;
top: 50%;
position: absolute;
}
#sliderBtnRight{
left: -200px;
/* background-image: url("../../Resources/slideImageLeft.png"); */
}
#sliderBtnLeft{
right: -200px;
/* background-image: url("../../Resources/slideImageRight.png"); */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerImageSlider">
<button class="sliderBtn" id="sliderBtnLeft" onclick="changeSliderImage(1)"></button>
<img class="sliderImg" src="Resources/SliderImages/sliderImg1.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg2.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg3.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg4.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg5.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg6.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg7.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg8.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg9.jpg">
<img class="sliderImg" src="Resources/SliderImages/sliderImg10.jpg">
<button class="sliderBtn" id="sliderBtnRight" onclick="changeSliderImage(-1)"></button>
</div>
因此,当调用函数updateImageSlider()
时,我希望当前图像淡出,下一个图像淡入。
示例
$(currentImage).fadeOut(1000, function () {
// hide the image
});
$(nextImage).fadeIn(1000, function () {
// show the image
});
但是当尝试将此代码放入我现有的代码时,它似乎没有正常工作。
我想过写作
var currentImage = sliderImages[i];
$(currentImage).fadeOut(1000, function () {
currentImage.style.display = "none";
});
和
var nextImage = sliderImages[sliderIndex - 1];
$(nextImage).fadeIn(1000, function () {
nextImage.style.display = "block";
});
但这不符合我的代码。当前图像逐渐淡出,而下一张图像已经在当前容器下方淡出...
答案 0 :(得分:1)
尝试更改updateImageSlider()
功能,如下所示,然后检查
function updateImageSlider() { // switch the images
var sliderImages = $(".sliderImg");
for (var i = 0; i < sliderImages.length; i++) {
$(sliderImages[i]).fadeOut(1000); // hide the current image
}
if (sliderIndex > sliderImages.length) {
sliderIndex = 1;
} else if (sliderIndex < 1) {
sliderIndex = sliderImages.length;
}
setTimeout(function() {
$(sliderImages[sliderIndex - 1]).fadeIn(1000); // show the next image
}, 1000);
}
选中此fiddler作为参考。
答案 1 :(得分:0)
尝试应用以下updateImageSlider()函数:
function updateImageSlider() { // switch the images
var sliderImages = $(".sliderImg");
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].css('display','none').fadeOut(); // hide the current image
}
if (sliderIndex > sliderImages.length) {
sliderIndex = 1;
}
else if (sliderIndex < 1) {
sliderIndex = sliderImages.length;
}
sliderImages[sliderIndex - 1].css('display','block').fadeIn(); // show the next image
}