javascript - 移除轮播图定时器失败？调用轮播函数后，timeID的值为什么还是null?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main { height:100px;}.main .news-section { display:flex; height:342px; /* background-color: red; */}.main .news-section .banner { width:605px; background-color: #000; overflow:hidden;}.news-section .banner .img-list { display:flex; width:604px; }.news-section .banner .img-list .item { flex-shrink:0;}.news-section .banner .img-list .item a { display:block;}.banner .img-list .item a img { width:100%;}.banner .title-list { display:flex; height:44px; line-height:44px; font-size:14px; background-color: rgba(0,0,0,.15);}.banner .title-list .item { flex:1; text-align: center; }.banner .title-list .item a { display:block; color:#b1b2be;}.banner .title-list .item.active a,.banner .title-list .item a:hover { background-color: rgba(255,255,255,.15) ; color:#f3c258;}</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section"> <div class="banner"> <ul class="img-list"> <li class="item"> <a href="#"> <img src="./images/banner01.jpeg" alt=""> </a> </li> <li class="item"> <a href="#"> <img src="./images/banner02.jpeg" alt=""> </a> </li> <li class="item"> <a href="#"> <img src="./images/banner03.jpeg" alt=""> </a> </li> <li class="item"> <a href="#"> <img src="./images/banner04.png" alt=""> </a> </li> <li class="item"> <a href="#"> <img src="./images/banner05.png" alt=""> </a> </li> </ul> <ul class="title-list"> <li class="item active"> <a href="#">海诺设计理念</a> </li> <li class="item"> <a href="#">秘宝星盘上线</a> </li> <li class="item"> <a href="#">校园主理人</a> </li> <li class="item"> <a href="#">英雄练习更新</a> </li> <li class="item"> <a href="#">K甲大侦探</a> </li> </ul> </div></div></div>
<script>
// 获取需要用到的元素var titleEl = document.querySelector(".title-list");var activeEl = document.querySelector(".active")var imglistEl = document.querySelector(".img-list")var currentIndex = 0;var timeID=null;titleEl.onmouseover = function(event) { itemEl = event.target.parentElement; console.log(itemEl) if (!itemEl.classList.contains("item")) return; // 1.移除之前的active activeEl.classList.remove("active"); // 2.给当前发生事件的元素添加active; itemEl.classList.add("active"); // 3.更新当前的activeEl activeEl = itemEl; // 拿到索引 // for (var i = 0; i < titleEl.children.length; i++) { // if (titleEl.children[i] === itemEl) break; // } // console.log(i) var index = Array.from(titleEl.children).findIndex(function(item) { return item === itemEl; }) imglistEl.style.transform = `translateX(${-604*index}px)` imglistEl.style.transition = `all 300ms ease` currentIndex = index;}startTimer();// 移除定时器console.log(timeID)var bannerEl = document.querySelector(".banner");bannerEl.onmouseenter = function() { clearInterval(timeID);}bannerEl.onmouseleave = function() { startTimer();}function startTimer() { var timeID = setInterval(function() { currentIndex++ if (currentIndex === titleEl.children.length) { currentIndex = 0; } imglistEl.style.transform = `translateX(${-604*currentIndex}px)` imglistEl.style.transition = `all 300ms ease` // 移除titleList中的li的active activeEl.classList.remove("active"); // 给当前移动到的li添加active var currentItemEl = titleEl.children[currentIndex]; currentItemEl.classList.add("active") // 记录最新的activeEl activeEl = currentItemEl; },2000);}</script>
</body>
</html>
</body>
</html>
共有1个答案
没有看你logic 从你方法可以看出你在函数里面又声明了一个var timeID
function startTimer() { var timeID = setInterval(function() { currentIndex++-
求最好用的轮播js插件，主要是用于图片轮播，html块轮播
-
图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同； DOM结构默认不支持循环播放，DOM结构如下： <div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
-
使用指南 组件介绍 本组件为轮播图组件，支持展示指示器，如果组件自带的指示器样式并不满足你的要求，那么组件也提供了相应的 slot 插槽以便你能自定义展示你想要的指示器。另外，值得注意的是，本组件使用时需要结合 fe-swiper-item 使用。 引入方式 import { Swiper,SwiperItem } from "feart"; components:{ 'fe-swip
-
自动轮播 设置参数auto为true, 控件会在完成render后开始播放, 即开始轮播. 或者调用slider.play()/slider.stop()来开始/暂停播放 <div class="container"> <div id="slider-container-default"> <!-- 请注意，下边这个 stage 中不要出现空白字符，否则对效果有影响 -->
-
Swiper 轮播图 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过list参数传入轮播图列表值，该值为一个数组，元素为对象，见如下： list的"image"属性为轮播图的图片路径 list的"title"属性为需要显示的标题 说明： 某些情况下 您从服务端获取的数据，里面的数组对于图片的属性名不一定为imag
-
本文向大家介绍JavaScript实现旋转轮播图，包括了JavaScript实现旋转轮播图的使用技巧和注意事项，需要的朋友参考一下 最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： 这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮