项目背景：

大二上学期复习完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>

总结：

1，在定时器外设置一个变量flag，默认值为true(默认执行)，
2，在某情况下不需要执行定时器里的操作时，将flag改为false时即可，
3，同时记录flag改为false时定时器停留的索引，当我们将flag改为true时从记录时的索引开始，就像实现了定时器启动与停止的效果

Js、jquery 定时器启动与停止效果实现相关推荐

html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
软定时器的启动与停止
文章目录 1 软定时器的启动与停止 1 软定时器的启动与停止软定时器单独开一个定时器任务来处理,硬定时器直接放在Systick中断中进行处理. 定时器启动: 定时器停止: 具体的实现代码如下: /* ...
jquery.flexslider-min.js实现banner轮播图效果
查看演示立即下载插件描述: jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果实现方法引用jquery和flexslider.js到你的页面 [html] view ...
java定时器停止_java 定时器中任务的启动、停止、再启动
package com.cvicse.ump.timer.service; import java.util.Date; import java.util.Timer; import com.cvic ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
(008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
13. JS jQuery
1. JavaScript概述 1.1 JavaScript的历史 1992年Nombas开发出C-minus-minus(C–)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名Script ...

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

项目背景：

完成效果需求：

问题描述：

解决方案：

总结：

Js、jquery 定时器启动与停止效果实现相关推荐

最新文章

热门文章