【九月打卡】第三天 前端综合案列仿慕课首页-轮播图功能和限时拼团

课程信息

● 学习课程：Java工程师2022版
● 章节名称：前端综合案例-仿慕课网首页-轮播图功能和限时拼团
● 讲师：八戒猪

课程内容

1. 轮播图功能

• 左右按钮的切换功能
  • 1.获取按钮，2.获取要改变的标签对象，3.绑定按钮的点击事件 4.修改对应的属性
  • 修复点击两次延迟效果不见的bug, 定义一个变量flag, flag为true才能点击，每隔1s重置 flag值
• 圆点切换
  • 1.获取所有切换圆点，2.排他思想先重置所有的li标签类，然后给对应的一个与圆点加上对应样式类
  • 循环注册圆点的点击事件，同样的修复点击两次没有延迟效果的问题
• 自动轮播
  • 使用setInterval定时修改对应图片以及样式
  • 绑定鼠标移进去和移出去轮播图对应的事件
• 相关代码

// 获取左右侧切换按钮
const rightArrow = document.querySelector('.arrow-r');
const leftArrow = document.querySelector('.arrow-l');

// 获取a标签对象
const swiperA = document.querySelector('.swiper a');
// 获取最外层的通栏的div对象
const banner = document.querySelector('#banner');
// 获取所有的切换圆点
const lis = document.querySelectorAll('.circle-list li');
const ul = document.querySelector('.circle-list');
// 定义自动轮播的定时器
let timer = null;

let i = 0;
// 修改轮播图的样式
function changeImage(index) {
  swiperA.style.backgroundImage = `url(${swiperImgList[index].path})`;
  swiperA.href= swiperImgList[index].url;
  banner.style.backgroundImage = `url(${swiperImgList[index].bg})`;
  currentCircle(index);
}
changeImage(i);
// 设置是否允许点击事件的执行的标志位
	// true 则允许，否则不允许
	let flag = true;

rightArrow.onclick = function () {
  if(!flag) {
    return;
  }
  flag = false;
  i = ++i == 4 ? 0 : i;
  changeImage(i);
  setTimeout(()=>{
    flag = true;
  },1000)
}
leftArrow.onclick = function () {
		if(!flag) {
			return;
		}
		flag = false;
		i = --i == -1 ? 3 : i;
		changeImage(i);
		setTimeout(()=>{
			flag = true;
		},1000)
	}

// 选中圆点函数分装
	function currentCircle(index) {
		for(let i = 0; i < lis.length; i++){
			lis[i].className = "";
			lis[index].className = "current";
		}
	}

	// 循环注册圆点点击时间
	for(let i=0; i< lis.length; i++){	
		lis[i].onclick = function () {
			if(!flag) {
				return;
			}
			flag = false;
			currentCircle(i);
			setTimeout(()=>{
				flag = true;
			},1000)
		}	
	}

	// 自动轮播
	timer = setInterval(() => {
		i = ++i == 4 ? 0 : i;
		changeImage(i);
	}, 3000)

	swiperA.onmouseenter = function() {
		clearInterval(timer);
	}

	swiperA.onmouseleave = function() {
		timer = setInterval(() => {
			i = ++i == 4 ? 0 : i;
			changeImage(i);
		}, 3000)
	}

	leftArrow.onmouseenter = function() {
		clearInterval(timer);
	}

	rightArrow.onmouseenter = function() {
		clearInterval(timer);
	}

	ul.onmouseenter = function() {
		clearInterval(timer);
	}

2. 限时拼团倒计时
   a. 获取时分秒的标签对象
   b. 获取结束时间和当前时间的时间戳
   c. 计算剩余时间的总秒数
   d. 计算小时parseInt(seconds/3600)不够10补0
   e. 计算分钟 parseInt(seconds%3600/60)不够10补0
   f. 计算秒 parseInt(seconds%3600%60)不够10补0
   g. 设置对应的标签的innerText属性
   h. 每一秒执行setInterval
3. 滚动课程
   a. 使用子绝父相
   b. 定时修改标签的left属性
   c. ul标签绑定鼠标移入和移出时间

学习收获

页面布局以及样式相关设置的学习巩固，还有对于获取页面元素，绑定事件，以及对页面样式的修改相关内容复习和巩固，定时执行setInterval相关的使用

打卡截图