手机网站app制作,网站如何排名,wordpress邮箱发送信息错误,flashfxp上传网站最好今天分享一个使用JS制作的轮播图效果 个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大一在校生#xff0c;web前端开发专业 #x1f921; 个人主页#xff1a;几何小超 #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;…最好今天分享一个使用JS制作的轮播图效果 个人名片 作者简介一名大一在校生web前端开发专业 个人主页几何小超 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡学好前端 首先是HTML部分
div 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/div
下一步是css部分 * {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;}
之后就是来介绍一下JS实现轮播图的效果
我们都知道轮播图点一下右边的箭头或者是左边的箭头就可以滚动页面
所以我们第一步先做右边的箭头
还是先声明一个数组里面放了图片和文字和背景颜色
第一步我们先获取三个元素toggle()是一个方法调用我是把左边和右边的写在一个方法显示更加美观然后呢我们执行右侧按钮业务还是先获取右侧按钮然后定义一个信息量i0
因为我们的i需要进行i或者是i--的操作所以在上面等单独定义一个i0记住这里不能用const只能用let
然后注册点击事件 next.addEventListener(click, function()
但是当我们轮播图到了最后一个需要往返第一个这时候我们需要判断如果到了素组下标为8的时候我们就得返回第一个
// 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 imgdocument.querySelector(.slider-wrapper img)const pdocument.querySelector(.slider-footer p)const footerdocument.querySelector(.slider-footer)// 1右侧按钮业务// 1.1获取右侧按钮const nextdocument.querySelector(.next)let i0// 1.2注册点击事件next.addEventListener(click, function(){i// 1.6判断if(i8){i0}toggle()})
2.右侧的点击事件和左侧一样就是需要换一下判断依据还要获取的元素。前几章我已经说过如何来得到对应的对象比如图片文字和背景颜色还有更新的小圆点
// 2.左侧按钮const prevdocument.querySelector(.prev)prev.addEventListener(click, function(){i--// 1.6判断ii0?sliderData.length-1:itoggle()})function toggle(){
//公共部分// 1.3得到对应的对象img.srcsliderData[i].urlp.innerHTMLsliderData[i].titlefooter.style.backgroundColorsliderData[i].color// 1.5更换小圆点document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)}
3最后讲一个功能这里我们依旧是在定时器上面声明一个变量因为我们定时器也是有一直在懂所以我们来这块设定一个点击事件
然后我们加了这样一个功能比如鼠标经过盒子停止定时器或者是离开又开始定时器的操作
通称都用了这两个事件
第一个是鼠标经过停止事件第二个是开始事件这样呢我们一个完整的轮播图就做出来了 slider.addEventListener(mouseenter, function(){ slider.addEventListener(mouseleave, function() // 3.自动播放let timerIdsetInterval(function(){next.click()},1000)// 4.鼠标经过大盒子停止定时器const sliderdocument.querySelector(.slider)//注册事件slider.addEventListener(mouseenter, function(){//停止定时器clearInterval(timerId)})// / 4.鼠标经过大盒子开启定时器//注册事件slider.addEventListener(mouseleave, function(){//停止定时器clearInterval(timerId)timerId setInterval(function(){next.click()},1000)}) 这是源码
!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 imgdocument.querySelector(.slider-wrapper img)const pdocument.querySelector(.slider-footer p)const footerdocument.querySelector(.slider-footer)// 1右侧按钮业务// 1.1获取右侧按钮const nextdocument.querySelector(.next)let i0// 1.2注册点击事件next.addEventListener(click, function(){i// 1.6判断if(i8){i0}toggle()})// 2.左侧按钮const prevdocument.querySelector(.prev)prev.addEventListener(click, function(){i--// 1.6判断ii0?sliderData.length-1:itoggle()})function toggle(){// 1.3得到对应的对象img.srcsliderData[i].urlp.innerHTMLsliderData[i].titlefooter.style.backgroundColorsliderData[i].color// 1.5更换小圆点document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)}// 3.自动播放let timerIdsetInterval(function(){next.click()},1000)// 4.鼠标经过大盒子停止定时器const sliderdocument.querySelector(.slider)//注册事件slider.addEventListener(mouseenter, function(){//停止定时器clearInterval(timerId)})// / 4.鼠标经过大盒子开启定时器//注册事件slider.addEventListener(mouseleave, function(){//停止定时器clearInterval(timerId)timerId setInterval(function(){next.click()},1000)})/script
/body/html
