Jquery ウィンドウサイズに合わせた画像スライドショーの作成（リサイズ対応版）

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

前回 “Jqueryでウィンドウサイズに合わせた画像スライドショーを作成” からの続きです。
　
前回の記事ではリサイズに全く降れていなかったのでちょっと変更

・横幅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">
$(document).ready(function(){
	var wwidth = $(window).width();
	if(wwidth >= 1000){
		$("#slider img").attr({width: "100%"});
	}else{
		$("#slider img").attr({width: "1000px"});
	}
});
$(window).resize(function(){
	var wwidth = $(window).width();
	if(wwidth >= 1000){
		$("#slider img").attr({width: "100%"});
		}else{
		$("#slider img").attr({width: "1000px"});
	}
});
$(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"></li>
		<li class="sbox"><img src="images/slide2.jpg"></li>
		<li class="sbox"><img src="images/slide3.jpg"></li>
		<li class="sbox"><img src="images/slide4.jpg"></li>
	</ul>
</div><!– close.slider –>
</body>
</html>

DEMO

解説は特に設けませんが、何かご質問等ありましたら
FBコメントをご活用下さい。