如何製作響應式圖像？

Question

我有一個簡單的響應式圖像滑塊，它幾乎可以正常工作，但問題是當圖像從一個圖像更改爲另一個圖像時，出現大幅度跳躍，我想解決這個問題。請參閱代碼。並幫助我。謝謝。

$("#slideshow > li:gt(0)").hide(); 
 

 
$("#slideshow") 
 
    .mouseenter(function() { 
 
    if (timer) { 
 
     clearInterval(timer) 
 
    } 
 
    }) 
 
    .mouseleave(function() { 
 
    timer = setInterval(function() { 
 
     $("#slideshow > li:first") 
 
     .fadeOut(500) 
 
     .next() 
 
     .fadeIn(500) 
 
     .end() 
 
     .appendTo("#slideshow"); 
 
    }, 3000); 
 
    }) 
 
    .mouseleave();

img { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 

 
<div> 
 
    <ul id="slideshow"> 
 
    <li><img src="http://lorempixel.com/800/300" alt="" /></li> 
 
    <li><img src="http://placehold.it/800x300" alt="" /></li> 
 
    <li><img src="http://placekitten.com/800/300" alt="" /></li> 
 
    <li><img src="http://placehold.it/800x300" alt="" /></li> 
 
    </ul> 
 
</div>

Answer 1

您可以position: absolute一個position: relative父裏面你LI元素。

var timer; /* P.S: forgot about this??? */ 
 

 
$("#slideshow > li:gt(0)").hide(); 
 

 
$("#slideshow") 
 
    .mouseenter(function() { 
 
    if (timer) { 
 
     clearInterval(timer) 
 
    } 
 
    }) 
 
    .mouseleave(function() { 
 
    timer = setInterval(function() { 
 
     $("#slideshow > li:first") 
 
     .fadeOut(500) 
 
     .next() 
 
     .fadeIn(500) 
 
     .end() 
 
     .appendTo("#slideshow"); 
 
    }, 3000); 
 
    }) 
 
    .mouseleave();

* {margin: 0;} 
 

 

 
#slideshow { 
 
    position: relative; 
 
    list-style: none; 
 
    height: 300px; 
 
} 
 

 
#slideshow li { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#slideshow li img{ 
 
    width:100%; 
 
    height:100%; 
 
    object-fit: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 

 
<div> 
 
    <ul id="slideshow"> 
 
    <li><img src="http://lorempixel.com/800/300" alt="" /></li> 
 
    <li><img src="http://placehold.it/800x300" alt="" /></li> 
 
    <li><img src="http://placekitten.com/800/300" alt="" /></li> 
 
    <li><img src="http://placehold.it/800x300" alt="" /></li> 
 
    </ul> 
 
</div>

---

上面的代碼是別人的想法，我已經看到了這裏SO，我完全不喜歡一個很多。修改DOM元素附加（無用的重新佈局/重繪）......針對非緩存的元素......等等......

我的建議是簡單地用一個計數器和一個更好的辦法，

/* FADE GALLERY */ 
 
(function() { 
 

 
    var $slides = $("#slideshow").find("li"), 
 
    tot = $slides.length, 
 
    c = 0, 
 
    itv; 
 

 
    function anim() { 
 
    $slides.stop().fadeOut().eq(++c % tot).fadeIn(); 
 
    } 
 

 
    function play() { 
 
    itv = setInterval(anim, 3000); 
 
    } 
 

 
    function stop() { 
 
    clearInterval(itv); 
 
    } 
 

 
    $("#slideshow").hover(stop, play).mouseout(); 
 

 
}());

#slideshow { 
 
    position: relative; 
 
    list-style: none; 
 
    height: 300px; 
 
    margin: 0; 
 
} 
 

 
#slideshow li { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#slideshow li + li { /* Hide using CSS to prevent flickering */ 
 
    display: none; 
 
} 
 

 
#slideshow li img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 

 
<div> 
 
    <ul id="slideshow"> 
 
    <li><img src="http://placehold.it/800x300/0bf?text=0" alt=""></li> 
 
    <li><img src="http://placehold.it/800x300/f0b?text=1" alt=""></li> 
 
    <li><img src="http://placehold.it/800x300/ff0?text=2" alt=""></li> 
 
    <li><img src="http://placehold.it/800x300/0fb?text=3" alt=""></li> 
 
    </ul> 
 
</div>