レスポンシブ画像の作成方法

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: relative親中にあなたLI要素をposition: absoluteすることができます。

---

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>

は、このコードは、上記の私がここで私は完全に 嫌いに多くのことを見てきた誰かのアイデアでした。等...

私の提案は、単にカウンタとはるかに優れたアプローチを使用することです... ...要素を追加する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>