この種のモールのエフェクトはインターネット上にたくさんありますが、ほとんどがプラグインであるか、JS を書くのが複雑すぎて、学習中の子供にとっては難しそうです。これはよりシンプルで理解しやすいようです。必要な場合は、コメントしてコードを投稿することもできます (便宜上、コードをコピーするだけで何も追加せずに使用できます):
;head>
シンプルで実用的なスクロール効果 <br><script type="text/javascript" src="http://jt.875.%20cn/js/jquery.js"></script> <br>< ;script type="text/javascript"> <br>$(function(){ <br>var len = $(".num > li").length; <br>varindex = 0; <br> var adTimer; <br>$(".num li").mouseover(function(){ <br>index = $(".num li").index(this); <br>showImg(index); <br>}).eq(0).mouseover(); <br>//スライドインするとアニメーションが停止し、スライドアウトするとアニメーションが開始されます。<br>$('.ad').hover(function(){ <br>clearInterval( adTimer); <br>},function(){ <br>adTimer = setInterval(function(){ <br>showImg(index) ) <br>インデックス ; <br>if(index==len){index=0; } <br>}, <br>}); >// 先頭の <br>function showImg(index) { <br>var adHeight = $(".content .ad").height(); <br>$(".slider") を制御して別のスライドを表示します(true,false).animate({top : -adHeight*index}, 1000); <br>$(".num li").removeClass("on") <br>.eq(index).addClass(" on"); <br>} <br> <br><style type="text/css"> <BR>ul,li{ margin:0;padding:0;} <BR> .ad { margin-bottom:10px;width:586px; height:150px; overflow:hidden;position:relative;} <BR>.content .slider,.content .num{position:absolute;} <BR>.content 。スライダー li{list-style:none;display:inline;} <BR> .content .slider img{ width:586px; height:150px;display:block;} <BR>.content .num{ right:5px; 5px;} <BR>.content .num li{float: left;color : #FF7300;text-align: center; line-height: 16px;width: 16px;height: 16px;font-family: Arial; : 12px;カーソル: ポインタ;オーバーフロー: 非表示;マージン: 3px 1px;ボーダー: 1px ソリッド #FF7300;背景色: #fff; <BR>} <BR>.content .num li.on{color: #fff;行の高さ: 21 ピクセル;幅: 21 ピクセル;高さ: 21 ピクセル;フォント サイズ: 16 ピクセル;マージン: 0 1 ピクセル;ボーダー: 0;背景色: #FF7300;フォントの太さ: 太字;} <BR></style>> ; <br> <br><div class="ad"> "スライダー" <br><li><img src="/static/imghwm/default1.png" data-src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="ショッピング モールで一般的に使用されるスクロール フォーカス画像効果コードはシンプルで実用的です_jquery" ></li> <br><li src="/static/imghwm/default1.png" data-src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" class="lazy" width="586" height="150"> <br><li src="/static/imghwm/default1.png" data-src="http://pic.875.cn/upload/2013-03-07/1506174974.jpg" class="lazy" width="586 " height="150"> <br> <li><img src="/static/imghwm/default1.png" data-src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" class="lazy" alt="ショッピング モールで一般的に使用されるスクロール フォーカス画像効果コードはシンプルで実用的です_jquery" ></li> <br><li>
<img src="http://pic.875.cn/upload/2013-01-24/1634016671.%20jpg" style="max-width:90%" style="max-width:90%" alt="ショッピング モールで一般的に使用されるスクロール フォーカス画像効果コードはシンプルで実用的です_jquery" > <br> <br><ul class="num"> <br><li>1<br>
</li>
<li>2</li>
<br><li>4</li>
<br><li>5</li> ; <br><br><br>
</ul>
</li>
</div>
<br><br> <br>レンダリングは次のとおりです: <br><br>
