Question

今天在创建一个滑块时我卡在代码中间，我怎么能在jquery中逐个淡化和淡出图像。我到目前为止尝试的代码： -

  <head>
  <style>
   #slideshow{
     list-style: none;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     padding: 0;
     margin: 0;
     position:fixed;
  }
  ul{
     list-style-type:none;
  }
 ul li{
     display:inline;
     width: 100%;
     height: 100%;
     position:absolute;
     background-size:cover;
     background-position:center center;
 }
 ul li img{
    display:none;
 }
 </style>
 </head>
<body>
<ul id="slideshow">
   <li><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
</ul>
<script>
    window.onload=init;
function init(){
items=$('ul').children('li');
i=0;
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')').fadeOut(1000,function(){
    for(i=0;i<items.length;i++){
        item=$(items[i]);
        item.css('background-image','url('+ item.find('img').attr('src') +')');
    }
 });
}
</script>
</body>

显示第一张图像后，它会自动转到最后一张图像而不显示第二张图像。请帮我纠正这个问题。

Answer 1

以下是如何做到的：JSFiddle

function init(){
    $("#slideshow li").each(function(index){
       this.style.backgroundImage = "url('" + this.children[0].src + "')"; 
        if( index != 0)
           this.style.display = "none"; 
    });

    setTimeout(changeImage, 4000);
}

function changeImage(){
    $curr = $("#slideshow .active");
    $next = $("#slideshow .active").next();

    if($next[0] === undefined)
        $next = $("#slideshow li").eq(0);

    $curr.fadeOut(1000, function(){
        $next.fadeIn(1000, function(){
            $curr.removeClass("active");
            $next.addClass("active");
            setTimeout(changeImage, 4000);  //change image every 4 seconds
        });   
    });                 
}

$(document).ready(init);

Answer 2

你需要使用setInterval（），必须告诉你当前的img是什么。假设所有图像都隐藏在活动图像中。

<ul id="slideshow">
   <li class="active"><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
</ul>

function ShowNext()
{
    var current = $("#slideshow .active");
    $(current).removeClass("active");
    $(current).fadeOut(1000, function () {
        $(current).next().fadeIn(1000);
        $(current).next().addClass("active");

    });

}

setInterval(function() {
    ShowNext(); 
}, 4000);

代码未经过测试，但您应该这样做。当你到达滑块的末尾时，你需要做一些事情，但我相信你可以处理它。

Answer 3

我建议使用单个元素而不是3.

另外，使用递归函数每2秒交换一次图像。

最后请注意，javascript已在<head>元素内移动。

更新：这已经过测试并且效果很好 - 必须修复一些错误 - 这是更新后的代码：

<html>
<head>
    <style><!-- Your Styles --></style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="javascript">

        var imgNum = 1;

        $(document).ready(function() {
            doSlideshow();
        });

        function doSlideshow() {
            $('#image1').fadeOut(400, function() {
                $('#image1').attr('src', 'img/' + imgNum + '.jpg');
                $('#image1').fadeIn(400);
                imgNum++;
                if (imgNum == 4) { imgNum = 1; }
                setTimeout('doSlideshow()', 2000);
            });
        }

    </script>
</head>
<body>
    <ul id="slideshow">
       <li><img id="image1" src="" /></li>
    </ul>
</body>
</html>

Answer 4

肯定有不止一种方法可以做到这一点。

我在这里回答了类似的问题：

>> Adding fade to simple slideshow with Javascript <<

但是，要直接回答您的问题，请考虑以下事项：

>> WORKING JS FIDDLE <<

// create arbitrary namespace
window.slideshow = {
    slides: null,
    currentSlide: null,
    nextSlide: null,
    interval: 3000,
    timer: null,
    init: function() {
        console.log('init slideshow');
        this.slides = $('#slideshow img');
        this.planNextSlide(1);
    },
    planNextSlide: function(timeoutInterval) {
        console.log('next slide (' + timeoutInterval + ')');
        this.timer = setTimeout(this.transitionSlide, timeoutInterval);
    },
    transitionSlide: function() {
        console.log('transition slide (' + (slideshow.currentSlide != null) + ')');
        if (slideshow.currentSlide != null) {
            // fade out old slide first
            slideshow.slides.eq(slideshow.currentSlide).fadeOut('fast', function() {
                slideshow.nextSlide = slideshow.currentSlide + 1;
                if (slideshow.nextSlide == slideshow.slides.size()) {
                    slideshow.nextSlide = 0;
                }
                slideshow.currentSlide = null;
                slideshow.transitionSlide();
            });
        }
        else {
            // fade in new slide
            slideshow.nextSlide = slideshow.nextSlide == null ? 0 : slideshow.nextSlide;
            slideshow.slides.eq(slideshow.nextSlide).fadeIn('fast', function() {
                slideshow.currentSlide = slideshow.nextSlide;
                slideshow.planNextSlide(slideshow.interval);
            });
        }
    }
};

// initial state initializer
slideshow.init();

在jquery中使用fadein和fadeout逐个显示图像

4 个答案: