株式会社イータイム

〒604-8111
京都市中京区三条通高倉東入
桝屋町57 京都三条ビル5F

MAIL:webmaster@e-time.jp


がっくん

京都の街を盛り上げるがっくんのブログだがじ〜

簡単単純スライドショー

すぐに設置出来てややこしくないスライドショー
スライドショーってなんや複雑な事書きすぎてややこしいですよね

だからシンプルなのを書いたので使ってください。


JSは↓↓

function slideSwitch() {
    var $active = $('#slide DIV.active');
 
    if ( $active.length == 0 ) $active = $('#slide DIV:last');
 
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slide DIV:first');
 
    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );
 
 
    $active.addClass('last-active');
 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

 

 

CSSは↓↓


#slider_contents {
    height: 300px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 20px;
}


#slide {
    width:100%;
    position:relative;
    margin-right: auto;
    margin-left: auto;
}
 
#slide DIV {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
 
#slide DIV.active {
    width:100%;
    z-index:10;
    opacity:1.0;
}
 
#slide DIV.last-active {
    width:100%;
    z-index:9;
}

 

以上!
あとは
<div id="slide">
    <div class="active"><img src="IMG1" border="0" /></div>
    <div><img src="IMG2" border="0" /></div>
</div>

って書いちゃえば動きます。
ぷっぷくぷーなぐらい簡単ですね!