CSSとjQueryを使ったスライドショーを作ったのでエントリー。

CSSとjQueryを使ったスライドショー

デモページ

スライドさせたい画像と「次へ」と「戻る」があるだけのシンプルな構造です。
ほっとくと自動でスライドしたりします。「次へ」と「戻る」のどちらかを押せば止まります。

HTML

<div id="container">
	<div id="nav">
	<p id="imgPrev"><a href="#">Prev</a></p>
	<p id="imgNext"><a href="#">Next</a></p>
        <div id="imgArea">
            <div id="imgWrap">
                <ul>
                    <li class="img"><a href="#"><img src="images/01.jpg" /></a></li>
                    <li class="img"><a href="#"><img src="images/02.jpg" /></a></li>
                    <li class="img"><a href="#"><img src="images/03.jpg" /></a></li>
                    <li class="img"><a href="#"><img src="images/04.jpg" /></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

#container {
	margin: 0 auto;
	width: 800px;
}
#nav {
	margin-top: 100px;
	width: 800px;
	position: relative;
}
#imgPrev, #imgNext {
	width: 50px;
	height: 100%;
	position: absolute;
	top: 0;
}
#imgPrev {
	left: 0;
	background: url(images/arrow_left.png) no-repeat center center;
}
#imgNext {
	right: 0;
	background: url(images/arrow_right.png) no-repeat center center;	
}
#imgPrev a, #imgNext a {
	width: 50px;
	height: 100%;
	text-indent: -9999em;
	display: block;
	overflow: hidden;
}
#imgArea {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#imgWrap li.img {
	list-style-type: none;
}
#imgWrap li.img a {
	margin: 0;
	float: left;
	width: 800px;
	height: 280px;
	display: block;
}

jQueryの設置

jQueryを設置するには「公式サイト」からライブラリー本体をダウンロードして使うか、Googleが提供している「Google AJAX Libraries API」を使うかします。
今回はダウンロードしなくてもjQueryを利用できるので「Google AJAX Libraries API」を使っています。

使い方は簡単。以下のコードを書き込むだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

JavaScript

$(function(){
	//横幅の設定
	$("#imgWrap").css("width",800*$("#imgWrap li.img").size()+"px");
	$("#imgWrap li.img:last").prependTo("#imgWrap");
	$("#imgWrap").css("margin-left","-800px");
	//戻るの設定
	$("#imgPrev").click(function(){
		$("#imgWrap").animate({
			marginLeft : parseInt($("#imgWrap").css("margin-left"))+800+"px"
		},"slow","swing" , 
		function(){
			$("#imgWrap").css("margin-left","-800px")
			$("#imgWrap li.img:last").prependTo("#imgWrap");
		});
	});
	//次への設定
	$("#imgNext").click(function(){
		$("#imgWrap").animate({
			marginLeft : parseInt($("#imgWrap").css("margin-left"))-800+"px"
		},"slow","swing" , 
		function(){
			$("#imgWrap").css("margin-left","-800px");
			$("#imgWrap li.img:first").appendTo("#imgWrap");
		});
	});
	//マウスオーバー時の戻ると次への設定
	$("#imgPrev,#imgNext").fadeTo(0,0.2);
	$("#imgPrev,#imgNext").hover(function(){
		$(this).fadeTo(100,1);
		},
		function(){
		$(this).fadeTo(200,0.2);
		}
	);
	//自動スライド
	var timerID = setInterval(function(){
		$("#imgNext").click();
	},8000);
	$("#imgPrev a,#imgNext a").click(function(){
		clearInterval(timerID);
	});
	
});

今回はシンプルなものだったので、次は凝ったものを作ってみようかなとか思っています。

Bookmark & Share

Leave a Reply

  • Categories