Js、jquery 定时器启动与停止效果实现

最新推荐文章于 2024-02-27 11:11:46 发布

qq_27420125

最新推荐文章于 2024-02-27 11:11:46 发布

阅读量3.4k

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/qq_27420125/article/details/109039559

版权

项目背景：

大二上学期复习完jquery后的国庆作业

使用jquery百分百完成以下网址轮播图效果

完成效果需求：

一，轮播图每3秒自动切换下一个图片，同时图片对应的选项样式会改变为红色选中状态
二，鼠标悬停在轮播图下面的选项或图片时，会让选中的选项出现对应的图片，停止定时器，图片不会切换，图片对应的下面的选项样式也不会更换
三，具体效果浏览网页https://www.hongxiu.com/

问题描述：

1，当我们鼠标悬停在图片或者图片下面的选项上时，定时器依旧在启动着，自动更换图片和图片下面的选项样式

2，对于定时器，我所知的有创建定时器跟清除定时器的方法，那我们该怎么实现在需要的时候启动定时器，不需要的时候让定时器停止而不是删除又创建呢

解决方案：

1，鼠标悬停在轮播图下面的选项或图片时定时器停止

2，鼠标离开时记录鼠标离开前的索引值从离开时的索引开启定时器

3，声明定义一个flag变量 var flag=true; 在定时器里 if 判断只有当 flag为 true 时才图片切换与选项样式修改操作，为 false 时自然就不进行操作

4，其实该操作并不是让定时器停止，只是我们这样的操作像是定时器停止了一样，我们只是通过flag变量判断它满足我们需要时就进行相应操作，不满足就不操作而已

5，看下面的代码注释部分即可，由于jquery跟图片都是离线的，查看下面代码效果点击下面的链接
点击跳转查看下面代码效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
       
        
    </style>
    <script>
        $(function(){
            var lbt=$('<div class="lbt">');
            lbt.append('<img src="img/嫡长女她又美又飒.jpg" alt=""><img src="img/付先生亲手组cp.jpg" alt=""><img src="img/偏执大佬宠妻手册.jpg" alt=""><img src="img/他奔你而来.jpg" alt=""><img src="img/成亲后王爷暴富了.jpg" alt="">');
            var ul=$("<ul class='lbtul'>");
            ul.append('<li>嫡长女她又美又飒</li><li>付先生亲手组cp</li><li>偏执大佬宠妻手册</li><li>他奔你而来</li><li>成亲后王爷暴富了</li>');
            lbt.append(ul);
            $("body").append(lbt);
            $("*").css({
                padding:0,
                margin:0,
            })
             $(".lbt").css({
                 width:"760px",
                 margin:"auto",
                 position:"relative",
             })
             $(".lbtul").css({
                listStyleType:"none",
                position:"absolute",
                bottom:"0px",
             })
             $(".lbtul li").css({
                float: "left",
                width: "150px",
                textAlign: "center",
                borderRight: "#c2c2c2 solid 1px",
                lineHeight: "40px",
                color: "#ffffff",
                backgroundColor: "rgba(0,0,0,.4)",
                cursor: "default",

             })
             $(".lbt img").css("width","755px");
             $(".lbt li").eq(0).css("background","#f01742");
             $(".lbt img").eq(0).css("display","block").siblings("img").css("display","none");
            
            //当flag为true时执行定时器
            var flag=true;
            var i=0;
            setInterval(function(){
                if(flag){
                    ++i;
                $(".lbt img").eq(i).css("display","block").siblings("img").css("display","none");
                 $("li").eq(i).css("background","#f01742").siblings("li").css("background","rgba(0,0,0,.4)");
                 if(i==$(".lbt img").length-1){
                    i=-1;
                 }
                }
               
             },2000)
             //鼠标经过时事件，鼠标经过悬停li或图片时不启动定时器 设flag为false
             $(".lbtul li,img").mouseover(function(){
                 flag=false;
                 var index=$(this).index();
                 //从鼠标悬停时开始定时器轮播
                 i=index;
                 $(".lbt img").eq(index).css("display","block").siblings("img").css("display","none");
                 $(this).css("background","#f01742").siblings("li").css("background","rgba(0,0,0,.4)");
             })
             //鼠标离开图片或李时启动定时器 设flag为true
             $(".lbtul li,img").mouseout(function(){
                 flag=true;
             })
            
        })
    </script>
</head>
<body>

</body>
</html>