图片自动切换鼠标移上暂停6秒继续切换的js代码

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 867 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #代码

本文介绍了一种使用HTML和JavaScript实现网页背景图片自动切换的方法。通过设置定时器，每隔一段时间改变网页背景图片，并在鼠标悬停时暂停切换，离开后再继续。注意合理使用clearInterval和setTimeout确保定时器正确管理。

html代码部分，将切换的图片设为main的背景图片

    <div class="main" onmouseover="stop()">
       <img src="./img/logo.png" alt="" class="logo">
       <nav>
           <ul>
               <li><a href="">Home</a></li>
               <li><a href="">Mission</a></li>
               <li><a href="">Whatawaitsyou</a></li>
               <li><a href="">Portofile</a></li>
               <li><a href="">Services</a></li>
               <li><a href="">Contact</a></li>
           </ul>
       </nav>
       <img src="./img/red.png" alt="" class="red">
       <ul class="three">
           <li><a href=""><img src="./img/three.png" alt=""></a></li>
           <li><a href=""><img src="./img/three.png" alt=""></a></li>
           <li><a href=""><img src="./img/three.png" alt=""></a></li>
       </ul>
   </div>

js部分

    count=1;
   function timing(){
       count = count++ === 4? 1:count;
       document.getElementsByClassName("main")[0].style.backgroundImage="url(./img/"+count+".png)";
   }
    var clock=setInterval(timing,3000);
    var star=function(){
       clearInterval(clock);
        clock=setInterval(timing,3000);
    }
   function stop () {
       clearInterval(clock);
       setTimeout(star,3000);
   }