ヘッダーで、jquery.jsと後述のbillboard.jsを読み込んでいます。
幅、高さ、スライド枚数は調整可能。
自動スライドしますが、ボタンコントロールをクリックすると自動スライドは停止します。
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;} |