jQueryでウィンドウサイズに合わせた画像スライドショーを作成

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

ひょんなことからウィンドウサイズに合わせたスライドショーが必要になったので
サクッと書いてみました。

仕様・留意点は1つ

・横幅100%の画像をスライドショーさせる

スライドショーの準備

自分用でもあるので下記一気にコピペ!!


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!– links –>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!– close.links –>
<title>title</title>
</head>

<body>
<script type="text/javascript">
$(function(){
   $("#slider ul li.sbox:last").prependTo("#slider ul");
setInterval(function(){
       $("#slider ul").animate({
           marginLeft : parseInt($("#slider ul").css("margin-left"))-100+"%"
       },"5000","swing" ,
       function(){
           $("#slider ul").css("margin-left","0%")
           $("#slider ul li.sbox:last").prependTo("#slider ul");
       });
},10000);
});
</script>

<style type="text/css">
body,html{width:100%;}
#slider{width:100%; height:300px; overflow: hidden; position: relative;}
#slider ul{width:400%;position: absolute; left:0px; top:0px;}
#slider ul li{float:left; width:25%;}
</style>

<div id="slider">
<ul>
<li class="sbox"><img src="images/slide1.jpg" width="100%"></li>
<li class="sbox"><img src="images/slide2.jpg" width="100%"></li>
<li class="sbox"><img src="images/slide3.jpg" width="100%"></li>
<li class="sbox"><img src="images/slide4.jpg" width="100%"></li>
</ul>
</div><!– close.slider –>

</body>
</html>

特に解説は設けませんが、何かありましたらfbコメントをご活用ください。

DEMO