画像スライダーをやってますが
<script type="text/javascript">
<!--
$(function(){
var sty=$("#s1");
sty.each(function(){
var mo1=$(this);
var mo2=mo1.find("ul");
var mo3=mo1.find("li");
var mo4=mo1.find("li:first");
mo3.css({display:"block",opacity:"0",zIndex:"1"});
mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500);
setInterval(function(){
mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'});
},5000);
});
});
-->
</script>
</head>
<body>
<div id="s1">
<ul>
<li><img src="rtp/7.jpg" width="300px" height="300px"></li>
<li><img src="rtp/9.jpg" width="300px" height="300px"></li>
<li><img src="rtp/10.jpg" width="300px" height="300px"></li>
</ul>
</div>
</body>
</html>
見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。
今日は前半をなんとかやったんですが
mo3.css({display:"block",opacity:"0",zIndex:"1"});
の部分のdisplay:"block"はなぜやっているのかが解りませんでした。
最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。
お礼
そうですか。 専門家の方でも難しいですか。 どうりで私には解決できない訳がわかりました。 アドバイス頂いた方法でやらせていただきます。 ご回答ありがとうございます。