<div id="main_contents_top_fade"> <div id="main_contents_top"> <img src="img/top/jc_top2-04.jpg" width="1000" height="343"> <img src="img/top/jc_top2-01.jpg" width="1000" height="343"> <img src="img/top/jc_top2-03.jpg" width="1000" height="343"> <img src="img/top/jc_top2-02.jpg" width="1000" height="343"> <img src="img/top/jc_top2-05.jpg" width="1000" height="343"> <img src="img/top/jc_top2-08.jpg" width="1000" height="343"> <img src="img/top/jc_top2-07.jpg" width="1000" height="343"> <img src="img/top/jc_top2-06.jpg" width="1000" height="343"> </div id="main_contents_top"> </div id="main_contents_top">
#main_contents_top_fade { width: 1000px; height: 343px; margin-bottom: 20px; } #main_contents_top { width: 1000px; margin-bottom: 20px; position: relative; overflow: hidden; height: 343px; /*display: none;*/ background-color: #FFF; display: none; } #main_contents_top img { top: 0; left: 0; position: absolute; }
<!--TOPフェード--> <script type="text/javascript"> $(function(){ var setImg = '#main_contents_top'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <!--フェードイン--> <script type="text/javascript"> $(document).ready(function() { $('#main_contents_top').fadeIn(0); }); </script>