Comment faire des images de carrousel-js tutoriel-php.cn

Comment faire des images de carrousel

angryTom

Libérer： 2019-08-12 16:08:44

original

9350 Les gens l'ont consulté

Comment faire des images de carrousel

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>

Copier après la connexion

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

Copier après la connexion

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!