So erstellen Sie ein Karussellbild-js-Tutorial-php.cn

So erstellen Sie ein Karussellbild

angryTom

Freigeben： 2019-08-12 16:08:44

Original

9282 Leute haben es durchsucht

So erstellen Sie ein Karussellbild

Rendering

Ideenanalyse:

　1. Starten Sie einen Timer

Methodenname: window.setInterval(code,MilliSec), Führen Sie den Code zu jedem angegebenen Zeitpunkt und unbegrenzt oft aus.

　2. Die Timer-Funktion wird hauptsächlich verwendet, um den Effekt des Bildkarussells auszuführen

　3. Wenn die Maus auf dem Bild platziert wird, wird das Bild angezeigt stop Der Effekt des Karussells löscht den Timer

Methodenname: window.clearInterval (timer）, löscht den angegebenen Timer.

　　4. Wenn die Maus das Bild verlässt, führt das Bild weiterhin den Karusselleffekt aus.

　5. Wenn die Wenn die Maus auf dem Li-Tag platziert wird, stoppt das Bild den Karusselleffekt und löscht den Timer

6. Wenn die Maus auf dem Li-Tag platziert wird, wird die entsprechende Zahl auf dem Li-Tag angezeigt auch angezeigt werden. Bild

7. Wenn die Maus den Li-Tag verlässt, dreht sich das Bild weiter. Die Timer-Funktion wurde wieder aktiviert

8. Der Hervorhebungseffekt auf dem li-Tag scrollt, während das Bild scrollt.

HTML-Code

<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>

Nach dem Login kopieren

JS-Code

<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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Karussellbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!