カルーセル写真の作り方-jsチュートリアル-php.cn

カルーセル写真の作り方

angryTom

リリース： 2019-08-12 16:08:44

オリジナル

9316 人が閲覧しました

カルーセル写真の作り方

レンダリング

##アイデア分析:

1. タイマーを開始します

メソッド名:

window. setInterval(code,MilliSec)、指定された時間ごとにコードを無制限に実行します。

2. タイマー機能は主に画像カルーセルの効果を実行するために使用されます

# 3. マウスを画像上に置くと、画像が表示されます。 stop カルーセルの効果によりタイマーがクリアされます。

メソッド名:

window.clearInterval (timer)

、指定されたタイマーをクリアします。

4. マウスが画像から離れると、画像はカルーセル効果を実行し続けます。タイマー機能は再び有効になります。

5.マウスを li タグの上に置くと、画像はカルーセル効果を停止し、タイマーをクリアします。

6. マウスを li タグの上に置くと、対応する番号が表示されます。画像

7. マウスがliタグから離れると、画像は回転し続けます。タイマー機能が再び有効になりました

8. 画像がスクロールすると、li タグのハイライト効果もスクロールします。

HTML コード

<body>
<div id="content">
        <!--轮换显示的横幅广告图片-->
        <div class="scroll_top"></div>
        <div class="scroll_mid"> 
        <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>
            <div id="scroll_number">
                <ul>
                    <li class="scroll_number_over" οnmοuseοver="stopScroll(1)"  οnmοuseοut="goon()">1</li>
                    <li  οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>
                    <li  οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>
                    <li  οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>
                    <li  οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>
                    <li  οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>
                </ul>
            </div>
        </div>
        <div class="scroll_end"></div>
</div>
</body>

ログイン後にコピー

JS コード

<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById(&#39;scroll_number&#39;);
scrLi=scroll_number.getElementsByTagName(&#39;li&#39;);
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i<scrLiLen;i++){
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById(&#39;dd_scroll&#39;);
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval(&#39;imgScroll()&#39;,500);
}
</script>

ログイン後にコピー

以上がカルーセル写真の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。