为什么左按钮的函数节流没有用，banner的事件为什么没有效果，这套代码还有哪里有问题吗

首页课程实战体系课手记专栏慕课教程

来源：2-4 代码编写（2）

情分的小前端

2021-10-17 11:41:48

(function() {

var carousel_list = document.getElementById('carousel_list');

var left_btn = document.getElementById('left_btn');

var right_btn = document.getElementById('right_btn');

var clone_li = carousel_list.firstElementChild.cloneNode(true);

var circles_ol = document.getElementById("circles_ol");

var circles_lis = circles_ol.getElementsByTagName("li");

var banner = document.getElementById("banner");

var timer;

carousel_list.appendChild(clone_li);

var index = 0;

var lock = true;

right_btn.onclick = rigg_b;

function rigg_b() {

if (!lock) return;

lock = false;

carousel_list.style.transition = 'transform .5s linear 0s';

index++;

carousel_list.style.transform = 'translateX(' + -16.666 * index + '%)';

if (index > 4) {

setTimeout(function() {

carousel_list.style.transition = 'none';

carousel_list.style.transform = 'none';

index = 0;

}, 500);

}

circles_chan();

setTimeout(function() {

lock = true;

}, 500);

console.log(index);

}

left_btn.onclick = function() {

if (!true) return;

lock = false;

if (index == 0) {

carousel_list.style.transition = 'none';

carousel_list.style.transform = 'translateX(' + -16.666 * 5 + '%)';

index = 4;

setTimeout(function() {

carousel_list.style.transition = 'transform .5s linear 0s';

carousel_list.style.transform = 'translateX(' + -16.666 * 4 + '%)';

}, 0);

} else {

index--;

carousel_list.style.transform = 'translateX(' + -16.666 * index + '%)';

}

circles_chan();

setTimeout(function() {

lock = true;

}, 500);

console.log(index);

}

function circles_chan() {

for (var i = 0; i < circles_lis.length; i++) {

if (i == index % 5) {

circles_lis[i].className = "current";

} else {

circles_lis[i].className = "";

}

circles_ol.onclick = function(e) {

if (e.target.tagName.toLowerCase() == 'li') {

var n = Number(e.target.getAttribute("data-n"));

index = n;

carousel_list.style.transform = 'translateX(' + -16.666 * index + '%)';

}

circles_chan();

}

timer = setInterval(rigg_b, 2000);

banner.onmouseenter = function() {

clearInterval(timer);

}

// 鼠标离开，自动轮播开始

banner.onmouseleave = function() {

// 设表先关

clearInterval(timer);

// 设置定时器，这里不要加var，加var就变为局部变量了，就clear不掉了！

timer = setInterval(sLun, 2000);

}

})();

<!DOCTYPE html>

<head>

<title>慕云游商城 - 机票、酒店、旅游攻略</title>

</head>

<body>

<ul>

<li>

目的地

</a>

</li>

<li>

锦囊

</a>

</li>

社区

</a>

<b></b>

<i></i>

</em>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="">旅行生活分享平台</a>

</li>

<li>

<a href="">JNE旅行生活美学</a>

</li>

<li>

<a href="">Biu伴(原结伴同游)</a>

</li>

<li>

<a href="">负责任的旅行</a>

</li>

<li>

</li>

</ul>

</div>

</li>

<li>

行程助手

</a>

</li>

商城

</a>

<b></b>

<i></i>

</em>

<li>

<a href="">机酒自由行</a>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</li>

酒店·名宿

</a>

<b></b>

<i></i>

</em>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</li>

<li>

特价酒店

</a>

</li>

</ul>

</nav>

</div>

<ul>

<a href="">机酒自由行</a>

<dl>

<dd>

</dd>

</dl>

</div>

</li>

<li>

</li>

<dl>

<dd>

</dd>

</dl>

</div>

</li>

<li>

</li>

<dl>

<dd>

<a href="">WIFI电话卡</a>

</dd>

</dl>

</div>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<dl>

<dd>

<a href="">CityWalk</a>

</dd>

</dl>

</div>

</li>

<li>

</li>

</ul>

</div>

</nav>

<h1>慕云游商城</h1>

</div>

</header>

</ul>

</ol>

</div>

<dl>

<dt>热门出发地</dt>

<dd>

</dd>

</dl>

</li>

<dl>

<dt>港澳台国内</dt>

<dd>

</dd>

</dl>

</li>

<dl>

<dd>

</dd>

</dl>

</li>

<dl>

<dt>东南亚南亚</dt>

<dd>

</dd>

</dl>

</li>

<dl>

<dd>

</dd>

</dl>

</li>

<dl>

<dt>澳新中东非</dt>

<dd>

</dd>

</dl>

</li>

</ul>

<dl>

<dd>

<a href="">香港迪士尼</a>

<a href="">香港海洋公园</a>

<a href="">塔新濠天地水舞间</a>

<a href="">澳门豪华自助台北101</a>

</dd>

</dl>

<dl>

<dt>国内热门城市</dt>

<dd>

</dd>

</dl>

<dl>

<dd>

<a href="">青城山大熊猫基地</a>

<a href="">长恨歌表演</a>

<a href="">大唐芙蓉园</a>

<a href="">厦门鼓浪屿</a>

<a href="">呼伦贝尔草原</a>

<a href="">希拉穆仁草原</a>

<a href="">重庆两江夜游船票</a>

</dd>

</dl>

</div>

<dl>

<dd>

<a href="#">香港迪士尼</a>

<a href="#">香港海洋公园</a>

<a href="#">新濠天地水舞间</a>

<a href="#">澳门豪华自助</a>

</dd>

</dl>

</div>

<dl>

<dd>

<a href="#">米其林餐厅</a>

<a href="#">东京迪士尼</a>

<a href="#">大阪环球影城</a>

<a href="#">冲绳一日游</a>

<a href="#">富士山日游</a>

</dd>

</dl>

</div>

<dl>

<dd>

<a href="#">泰国丛林飞跃</a>

<a href="#">泰国spa按摩</a>

<a href="#">清迈夜间动物园</a>

<a href="#">泰拳表演清莱一日游</a>

<a href="#">新加坡环球影城</a>

<a href="#">新加坡日游</a>

<a href="#">新加坡滨海湾花园</a>

<a href="#">沙巴美人鱼岛</a>

<a href="#">沙巴红树林萤火虫</a>

</dd>

</dl>

<dl>

<dd>

<a href="#">美娜多芽庄</a>

<a href="#">巴厘岛SPA</a>

<a href="#">网红漂浮下午茶</a>

<a href="#">珍珠岛游乐园</a>

<a href="#">富国岛浮潜海钓</a>

</dd>

</dl>

<dl>

<dd>

<a href="#">格鲁吉亚阿塞拜疆</a>

</dd>

</dl>

</div>

<dl>

<dd>

<a href="#">雷克雅未克</a>

<a href="#">巴黎迪斯尼</a>

<a href="#">尔阿尔罕布拉宫</a>

<a href="#">埃菲尔铁塔</a>

<a href="#">北欧破冰船</a>

<a href="#">英国天空岛</a>

</dd>

</dl>

<dl>

<dd>

<a href="#">拉斯维加斯</a>

<a href="#">圣地亚哥芝加哥</a>

<a href="#">尼亚加拉大瀑布</a>

<a href="#">黄石国家公园</a>

<a href="#">纽约大都会博物馆</a>

<a href="#">美国大峡谷西峡</a>

<a href="#">拉斯维加斯摩天轮</a>

</dd>

</dl>

</div>

<dl>

<dt>澳新南太平洋</dt>

<dd>

<a href="#">布里斯班奥克兰</a>

<a href="#">墨尔本之星</a>

<a href="#">悉尼热气球</a>

<a href="#">皇后镇霍比特人村</a>

<a href="#">怀托莫萤火虫洞</a>

<a href="#">米尔福德峡湾</a>

<a href="#">新西兰滑雪</a>

</dd>

</dl>

<dl>

<dd>

<a href="#">马达加斯加</a>

<a href="#">塔法拉利主题公园</a>

<a href="#">迪拜七星帆船酒店用餐</a>

<a href="#">夜游迪拜河</a>

<a href="#">亚特兰蒂斯水上乐园</a>

<a href="#">动物大迁徙</a>

<a href="#">撒哈拉沙漠</a>

</dd>

</dl>

</div>

</nav>

</div>

</section>

</body>

</html>

</head>

</html>

写回答

1回答

好帮手慕慕子

2021-10-17

同学你好，问题解答如下：

1、代码中并没有给元素设置id属性值为banner，导致document.getElementById("banner")获取元素为空，所以给banner绑定事件没有任何效果。

建议修改：给元素添加id属性值为banner

另外，鼠标离开恢复自动轮播时，需要调用rigg_b方法，建议修改：

2、因为左按钮点击事件函数中的if判断条件写成了固定值true，而不是变量lock，导致左按钮的节流函数没生效。

建议修改：

3、经过上述修改后，测试代码暂无其他问题，效果实现是可以的。

祝学习愉快~

0 学习 · 15276 问题

查看课程

相似问题

为什么setInterval 里面的timer不放var来义定timer，代码还是可以跑出来？

回答 1

左按钮的问题

回答 2

关于小圆点事件委托不生效问题

回答 3

您说就是给右按钮取了个名字，这种取名字的方式没见过额，取名字难道不用var吗？

回答 2

老师这里我把左按钮left调成负数按钮就不见了，这是为啥？

回答 2

打开慕课网App查看更多内容