MovableTypeやJSに関する私的メモの様なモノです。 その中でも皆さんの参考になれば幸いです。 本サイトの管理者は、これらの情報をあなたが利用することによって生ずるいかなる損害に対しても一切責任を負いません。
2012年10月2日
JSでスライド
ラベル:
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>