クリックで、右へ左へスライドするスライドショー

デモページへopen_in_new

JSを読み込みます

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

[billboard.js]JavaScript

$(function(){
	//初期設定
	$("#billboard ul").css("width",530*$("#billboard ul li").size()+"px");
	$("#billboard ul li:last").prependTo("#billboard ul");
	$("#billboard ul").css("margin-left","-530px");
	//ボタン前へ
	$("#prev").click(function(){
		$("#billboard ul").animate({
			marginLeft : parseInt($("#billboard ul").css("margin-left"))+530+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-left","-530px")
			$("#billboard ul li:last").prependTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//ボタン次へ
	$("#next").click(function(){
		$("#billboard ul").animate({
			marginLeft : parseInt($("#billboard ul").css("margin-left"))-530+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-left","-530px");
			$("#billboard ul li:first").appendTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//timer
	var timerID = setInterval(function(){
		$("#next").click();
	},5000);
	//reset
	$("#prev img,#next img").click(function(){
		clearInterval(timerID);
	});
});

HTMl

<div class="mod_billboardbelt">
<div class="mod_billboardcontent">
<div id="billboard">
<ul>
<li><a href="https://codingmania.net/"><img src="img/cut01.jpg" alt="1枚目" /></a></li>
<li><a href="https://codingmania.net/"><img src="img/cut02.jpg" alt="2枚目" /></a></li>
<li><a href="https://codingmania.net/"><img src="img/cut03.jpg" alt="3枚目" /></a></li>
<li>テキストの入力もできます。</li>
</ul>
<!--billboard_end--></div>
<div class="mod_billboardcontent_btn">
<ul>
<li id="next"><img src="img/prev.png" alt="次へ" /></li>
<li id="prev"><img src="img/next.png" alt="前へ" /></li>
</ul>
<!--mod_billboardcontent_btn_end--></div>
<!--mod_billboardcontent_end--></div>
<!--mod_billboardbelt_end--></div>

CSS

.mod_billboardbelt{
	padding:40px 0 40px 0;
	background-color:#062D46;
    -webkit-box-shadow: 0 0 20px #162229 inset;
    -moz-box-shadow: 0 0 20px #162229 inset;
    box-shadow: 0 0 20px #162229 inset;
}
.mod_billboardcontent{
	width:630px;
	margin:0 auto;
	position:relative;
}

#billboard{
	width:530px;
	height:250px;
	overflow:hidden;
	position:relative;
}

#billboard ul li{
	float:left;
	width:520px;
	height:240px;
	display:block;
	border:solid 5px #3C4F5C;
}
.mod_billboardcontent_btn #next{
	position:absolute;
	top:110px;
	left:-50px;
	cursor:pointer;
}
.mod_billboardcontent_btn #prev{
	position:absolute;
	top:110px;
	left:550px;
	cursor:pointer;
}