Maison > Article > interface Web > Comment faire des images de carrousel
Comment faire des images de carrousel
- angryTomoriginal
- 2019-08-03 14:25:559295parcourir
Rendu
Analyse des idées :
1. Démarrez un minuteur
Nom de la méthode : , exécutez le code à chaque heure spécifiée et exécutez-le un nombre illimité de fois. window.setInterval(code,MilliSec)
2. La fonction minuterie est principalement utilisée pour effectuer l'effet de carrousel d'images
3. Lorsque la souris est placée sur l'image, l'image sera stop L'effet du carrousel efface le minuteur
Nom de la méthode :, efface le minuteur spécifié. window.clearInterval (timer）
4. Lorsque la souris quitte l'image, l'image continue d'effectuer l'effet carrousel. La fonction minuterie est réactivée
5. Lorsque le la souris est placée sur la balise li, l'image arrêtera l'effet carrousel et effacera le minuteur
6. Lorsque la souris est placée sur la balise li, le numéro correspondant sur la balise li sera également être affiché. L'image
7. Lorsque la souris quitte la balise li, l'image continue de tourner. La fonction de minuterie a été réactivée
8. L'effet de surbrillance sur la balise li défile à mesure que l'image défile.
Code 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>
Code JS
<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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!