完成效果需求：

一，轮播图每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">
    <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){
                $(".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>
</html>
1，在定时器外设置一个变量flag，默认值为true(默认执行)，
 2，在某情况下不需要执行定时器里的操作时，将flag改为false时即可，
 3，同时记录flag改为false时定时器停留的索引，当我们将flag改为true时从记录时的索引开始，就像实现了定时器启动与停止的效果
                                    对于JavaScript的定时器来说没有严格意义上的暂停和重启，只有清除停止，但是可以通过一些‘障眼法’实现
 allChild[index].onclick = function(){//当点击目标且满足下面的条件时 让计时器时间暂停     if(gamInt == true){        $("#...
                                    JavaScript定时器：你需要知道的每个点原文链接： medium.com几周前我在推特上发布了这样一个面试问题： JavaScript面试问题： 在哪里可以找到setTimeout和setInterval的源代码？（他们在哪里实现的？） 你怎么在面试中回答？（你不能去网上搜索）function setTimeOut(callback  继续往下看之前先试着回答这个问题 推特上半数的回答都是...
                                    一个简单的定时器 setInterval()，clearInterval()用法，经常使用的场景是，验证码的发送，啥都不说直接上代码&lt;script&gt;
var clock = '';
var nums = 120;
function sortMessage(){
	var tel = $("#managerTel").val();
	if(!tel){
		alertError("请输入...
                                    场景：先点按钮，然后调用获取批次号的接口，根据批次号调用获取进度条值的接口，每秒刷新1次获取进度条值的接口。
问题：在进度条100时，关闭计时器，点击按钮开始刷新进度，进度值为100，关闭计时器
解决方法：目前只能在切换页面的时候才能关闭计时器
                                    text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩
function:必需参数，要调用的函数或要执行的代码串
time:必需参数，每隔多长时间调用函数，单位为毫秒
lang:可选参数，运行的脚本语言，JScript | VBScript | JavaScript
clearInterval()
表示停止setInterval定时器调用函数
function getTime() {
        console.lo