実装にはJQueryが必要です。
<div id="slider-unit" class="unit-1col">
<ul id="slider-nav" class="inline-list">
<li id="prev"><a href="javascript:void(0);">前へ</a></li>
<li id="next"><a href="javascript:void(0);">次へ</a></li>
</ul>
<div id="slider-inner" class="unit">
<div class="slide-item"><p>item-0</p></div>
<div class="slide-item"><p>item-1</p></div>
<div class="slide-item"><p>item-2</p></div>
<div class="slide-item"><p>item-3</p></div>
</div>
</div>
#slider-unit{
position:relative;
overflow:hidden;
width:740px;
}
#slider-unit #slider-inner{width:10000px;}
#slider-unit .slide-item{
clear:none !important;
float:left;
background:url(/common/images/contents/v_line.gif) 318px 0 repeat-y;
margin:0 20px;
width:670px;
}
#slider-unit .box-a,
#slider-unit .box-b{width:330px;}
#slider-nav #prev{float:left;}
#slider-nav #next{float:right;}
jQuery(function($){slider.init();});
var slider = {};
slider.prev = 0;//do not edit
slider.next = 1;//do not edit
slider.maxLength = 0;//do not edit
slider.width = 710;//set your element width
slider.init = function(){
//スライドするオブジェクトの数を取得
var itemLength = $("#slider-inner .slide-item").length;
//取得したオブジェクトの数をナビゲーションのトグルに使用するための最大値に設定
slider.maxLength = itemLength;
//中身が1個以下ならナビゲーションを非表示
if(slider.maxLength <= 1){$("#slider-nav").css("display","none"); }
//デフォルトは左端なので、前へを非表示
$("#slider-nav #prev").css("display","none");
$("#slider-nav #prev a").attr("href",slider.prev);
$("#slider-nav #next a").attr("href",slider.next);
//ナビゲーションクリックでの処理
slider.click();
}
slider.click = function(){
//前へ
$("#slider-nav #prev a").click(function(){
$("#slider-inner").animate({"marginLeft": -(slider.width * slider.prev)}, "fast", "swing");
if(slider.prev == 0){$("#slider-nav #prev").fadeOut(100);}
if(slider.next >= 1){$("#slider-nav #next").fadeIn(100);}
if(slider.prev == 0){slider.next = 1;}
if(slider.prev > 0){
slider.prev -= 1;
slider.next -= 1;
}
$("#slider-nav #prev a").attr("href",slider.prev);
$("#slider-nav #next a").attr("href",slider.next);
return false;
});
//次へ
$("#slider-nav #next a").click(function(){
$("#slider-inner").animate({"marginLeft": -(slider.width * slider.next)}, "fast", "swing");
if(slider.next == slider.maxLength-1){$("#slider-nav #next").fadeOut(100);}
if(slider.next > 0){$("#slider-nav #prev").fadeIn(100);}
if(slider.next == 1){
slider.prev = 0;
slider.next = 2;
$("#slider-nav #prev a").attr("href",slider.prev);
$("#slider-nav #next a").attr("href",slider.next);
return false;
}
if(slider.next <= slider.maxLength-1){
slider.prev += 1;
slider.next += 1;
}
$("#slider-nav #prev a").attr("href",slider.prev);
$("#slider-nav #next a").attr("href",slider.next);
return false;
});
}
text
text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text
<p id="sliderTrg"><a id="trg0" class="trgOn">トリガー0</a>
<a id="trg1" class="trgOff">トリガー1</a>
<a id="trg2" class="trgOff">トリガー2</a>
<a id="trg3" class="trgOff">トリガー3</a></p>
<div id="slider">
<div id="sliderInner">
<div class="section">
<h5>headline0</h5>
<p>text</p>
</div>
<div class="section">
<h5>headline1</h5>
<p>text text text text text text text text</p>
</div>
<div class="section">
<h5>headline2</h5>
<p>text text text text text text text text text text text text text text text text</p>
</div>
<div class="section">
<h5>headline3</h5>
<p>text text text text text text text text text text</p>
</div>
</div>
</div>
#slider{
width:388px;
padding:6px;
overflow:hidden;
border:3px solid #333333;
}
#slider #sliderInner{
width:1600px;
}
#slider #sliderInner .section{
width:400px;
float:left;
}
#sliderTrg a{
border-right:1px solid #666666;
padding:0 8px 0px 4px;
}
dom.event.addEventListener(window,"load",slider);
function slider(){
//トリガー取得
var trg = new Array();
var disp = new Array();
for(var i = 0 ; i < 4 ; i++){
trg[i] = document.getElementById("trg" + i);
trg[i].href = "javascript:void(0)";
}
//関数をセット
dom.event.addEventListener(trg[0],"click",function(){
setSlide(0)
});
dom.event.addEventListener(trg[1],"click",function(){
setSlide(-400)
});
dom.event.addEventListener(trg[2],"click",function(){
setSlide(-800)
});
dom.event.addEventListener(trg[3],"click",function(){
setSlide(-1200)
});
}
//グローバル変数を定義
var pos = 0;
var sec = 4;
var stop = "";
//スライダー
function slid(){
var sliderInner = document.getElementById("sliderInner");
if(pos > stop){
pos -= sec;
sliderInner.style.marginLeft = pos + "px";
var timer = setTimeout("slid()",10);
}else if(pos < stop){
pos += sec;
sliderInner.style.marginLeft = pos + "px";
var timer = setTimeout("slid()",10);
}
}
//スライダー実行
function setSlide(paramStop){
stop = paramStop;
slid();
}