2012年10月2日

JSでスライド


■JS
<script type="text/javascript">
(function($){
    $(window).load(function() {
        var obj = '#slide';
        var time = 5000;
        $(obj).find('div:first').css('z-index','1');
        $(obj).find('div').css('position','absolute');
        setTimeout( chgimage, time );
        function chgimage() {
            var $active = $(obj).find('.active').length ? $(obj).find('.active') : $(obj).find('div:first');
            var $next =  $active.next('div').length ? $active.next('div') : $(obj).find('div:first');
            $active.css('z-index','2');
            $next.css('z-index','1');
            $active.animate({opacity:'0'},1000,function(){
                $active.css('z-index','');
                $active.css('opacity','');
                $active.removeClass('active');
                $next.addClass('active');
                setTimeout( chgimage, time );});
        }
    });
})(jQuery);
</script>

■css
#slide{
    width:940px;
    height:410px;
    position:relative;
    overflow:hidden;
}

■html
<div id="slide">
<div><h1><img src="/image/xxxxx01.jpg" alt="あいうえお" /></h1></div>
<div><p><img src="/image/xxxxx02.jpg" alt="かきくけこ" /></p></div>
<div><p><img src="/image/xxxxx03.jpg" alt="さしすせそ" /></p></div>
<div><p><img src="/image/xxxxx04.jpg" alt="たちつてと" /></p></div>
</div>

ドメインって、早い者勝ちですよ!