Heim > Artikel > Web-Frontend > So erstellen Sie ein Karussellbild
So erstellen Sie ein Karussellbild
- angryTomOriginal
- 2019-08-03 14:25:559224Durchsuche
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>JS-Code
<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById('scroll_number');
scrLi=scroll_number.getElementsByTagName('li');
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('dd_scroll');
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('imgScroll()',500);
}
</script>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!