Home > Article > Web Front-end > How to make carousel pictures

How to make carousel pictures

angryTomOriginal: 2019-08-03 14:25:559272browse

Rendering

##Idea analysis:

1. Start a timer

Method name:

window.setInterval(code,MilliSec), execute code every specified time, unlimited times.

2. The timer function is mainly used to perform the effect of picture carousel

　3. When the mouse is placed on the picture, the picture will stop The effect of carousel clears the timer

Method name:

window.clearInterval (timer), clears the specified timer.

　4. When the mouse leaves the picture, the picture continues to perform the carousel effect. The timer function is re-enabled

　5. When the mouse is placed on When the li tag is above, the image will stop the carousel effect and clear the timer

6. When the mouse is placed on the li tag, the corresponding number on the li tag will also be displayed. Picture

7. When the mouse leaves the li tag, the picture will continue to rotate. The timer function has been re-enabled

8. The highlight effect on the li tag scrolls as the image scrolls.

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(&#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>

The above is the detailed content of How to make carousel pictures. For more information, please follow other related articles on the PHP Chinese website!

html JS li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does fetch mean?Next article：What does fetch mean?

See more

How to make carousel pictures

Related articles