聊城网站百度推广,作业设计模板,网站开发常见模块,广州天河区网站建设公司一、需求
昨天我们做了轮播图的自动播放#xff0c;即每隔一秒自动切换一次
今天我们增加两个需求#xff1a;
1、鼠标点击向右按钮#xff0c;轮播图往后切换一次#xff1b;鼠标点击向左按钮#xff0c;轮播图往前切换一次
2、鼠标悬停在轮播图区域中时#xff0c;…一、需求
昨天我们做了轮播图的自动播放即每隔一秒自动切换一次
今天我们增加两个需求
1、鼠标点击向右按钮轮播图往后切换一次鼠标点击向左按钮轮播图往前切换一次
2、鼠标悬停在轮播图区域中时轮播图暂停播放 二、代码素材
以下是缺失JS部分的代码感兴趣的小伙伴可以先自己试着写一写
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]/script
/body/html 三、算法思路
1、将代码素材在浏览器中打开并按F12进入开发者模式分析各个HTML标签在轮播图中的位置及作用
2、划分业务模块 2.1. 模块一自动播放模块 2.2. 模块二手动播放模块 2.3. 模块三鼠标悬停暂停播放模块
3、由于三个模块都与轮播图的播放有关所以我们可以封装一个函数实现轮播图的渲染
4、手动播放模块分别为两个按钮添加鼠标点击事件计数器 i 配合渲染函数实现手动播放下一张与手动播放上一张 5、自动播放模块利用间歇函数实现一秒切换一次的功能间歇函数中调用手动播放下一张模块中的鼠标点击事件实现轮播图的顺序播放
6、鼠标悬停暂停播放模块注册光标进入事件光标进入终止定时器注册光标离开事件光标离开开启定时器 四、完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]const img document.querySelector(.slider-wrapper img)const p document.querySelector(.slider-footer p)const ul document.querySelector(.slider-footer .slider-indicator)const footer document.querySelector(.slider-footer)let i 0function boFang() {img.src ./images/slider0${i 1}.jpgp.innerHTML sliderData[i].titlefooter.style.backgroundColor sliderData[i].color//注意classList.remove()括号中的类名不需要加点号document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)}//自动播放模块let timer setInterval(() {next.click()//自动调用鼠标点击事件}, 1000)//手动播放模块const prev document.querySelector(.prev)const next document.querySelector(.next)prev.addEventListener(click, () {i i - 1 -1 ? 7 : i - 1boFang()})next.addEventListener(click, () {i (i 1) % 8boFang()})//鼠标悬停暂停播放模块const slider document.querySelector(.slider)slider.addEventListener(mouseenter, () {clearInterval(timer)})slider.addEventListener(mouseleave, () {//开启定时器//注意再次开启定时器不要写let timertimer setInterval(() {next.click()//自动调用鼠标点击事件}, 1000)})
/script
/body/html
