原生js的懒人轮播图
<style>
body{
margin: 0;
padding: 0px;
}
#carousel{
margin: auto; /* 居中 */
width: 600px; /* 设置宽度 */
position: relative; /* 相对定位 */
overflow: hidden; /* 超出隐藏 */
}
#carousel img{
position: absolute; /* 绝对定位 使图片堆叠 */
width: 600px; /* 设定大小 按比例缩放 */
transition: all .6s; /* 动画 */
opacity: 0; /* 隐藏 */
}
.imgActive{
opacity: 1 !important; /* 显示图片 最高优先级 */
}
/* 控制按钮的样式 */
#leftArrow,
#rightArrow{
position: absolute;
left: 5px;
top: 43%;
width: 25px;
height: 30px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.7;
font-size: 20px;
cursor: pointer;
z-index: 1000;
}
#rightArrow{
left: auto;
right: 5px;
}
#sliderBtn{
position: absolute;
width: 100%;
bottom: 0;
display: flex;
justify-content: flex-end;
z-index: 1000;
}
.unitBtn{
width: 10px;
height: 10px;
background-color: #eee;
border-radius: 10px;
margin: 10px;
cursor: pointer;
}
.btnActive{
background-color: #4C98F7;
}
</style>
<body>
<!-- 轮播图容器 -->
<div id="carousel">
<img src="img/portfolio-2.jpg">
<img src="img/portfolio-3.jpg">
<img src="img/portfolio-4.jpg">
<img src="img/portfolio-5.jpg">
<img src="img/portfolio-1.jpg">
<!-- 按钮组 -->
<div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
<div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
<div id="sliderBtn"></div> <!-- 切换按钮组 -->
</div>
</body>
<script>
var imgArr = []; // 图片数组
var curIndex = 0; // 当前显示图片
var timer = null; // 定时器
var btnList = []; // 右下角切换按钮组
function slide(targetIndex = curIndex + 1){
curIndex = targetIndex % imgArr.length; // 获取当前index
imgArr.forEach((v) => v.className = "" ); // 设置其他图片隐藏
imgArr[curIndex] .className = "imgActive"; // 设置当前index图片显示
btnList.forEach(v => v.className = "unitBtn") // 设置其他按钮为灰色
btnList[curIndex] .className = "unitBtn btnActive"; // 设置当前按钮为蓝色
}
function createBtnGroup(carousel,config){
document.getElementById("leftArrow").addEventListener('click',(e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(curIndex-1); // 允许点击则切换上一张
timer = setInterval(() => {slide()},config.interval); // 重设定时器
})
document.getElementById("rightArrow").addEventListener('click',(e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(curIndex+1); // 允许点击则切换下一张
timer = setInterval(() => {slide()},config.interval); // 重设定时器
})
var sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
imgArr.forEach((v,i) => {
let btn = document.createElement("div"); // 制作按钮
btn.className = i === 0 ? "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
btn.addEventListener('click',(e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(i); // // 允许点击则切换
timer = setInterval(() => {slide()},config.interval); // 重设定时器
})
btnList.push(btn); // 添加按钮到按钮组
sliderBtn.appendChild(btn); // 追加按钮到按钮容器
})
}
function eventDispose(carousel,config){
document.addEventListener('visibilitychange',function(){ // 浏览器切换页面会导致动画出现问题，监听页面切换
if(document.visibilityState=='hidden') clearInterval(timer); // 页面隐藏清除定时器
else timer = setInterval(() => {slide()},config.interval); // 重设定时器
});
carousel.addEventListener('mouseover',function(){ // 鼠标移动到容器则不切换动画，停止计时器
clearInterval(timer); // 页面隐藏清除定时器
});
carousel.addEventListener('mouseleave',function(){ // 鼠标移出容器则开始动画
timer = setInterval(() => {slide()},config.interval); // 重设定时器
});
}
(function start() {
var config = {
height: "300px", // 配置高度
interval: 4000 // 配置轮播时间间隔
}
var carousel = document.getElementById("carousel"); //获取容器对象的引用
carousel.style.height = config.height; // 将轮播容器高度设定
document.querySelectorAll("#carousel img").forEach((v,i) => {
imgArr.push(v); // 获取所有图片组成数组
v.className = i === 0 ? "imgActive" : "";
});
eventDispose(carousel,config); // 对一些浏览器事件处理
createBtnGroup(carousel,config); // 按钮组的处理
timer = setInterval(() => {slide()},config.interval); // 设置定时器定时切换
})();
</script>
/**
建议使用框架写轮播图！！！如BootStrap
官网地址：https://v5.bootcss.com/
**/
原生js的懒人轮播图的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- js原声代码 轮播图
js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...
随机推荐
- 算法竞赛进阶指南0x33同余
定义 如果整数a,b除以正整数m的余数相同,那么a,b模m同余 . 知识点 拓展欧几里得算法 代码 #include <bits/stdc++.h> using namespace std ...
- 用VS Code搞Qt6：编译源代码与基本配置
先说明一下,本水文老周仅讨论新版的 Qt 6,旧版的 Qt 不讨论. 尽管 Qt 有自己的开发环境,但老周必须说句不装逼的话:真的不好用.说起写代码,当然了,用记事本也能写.但是,有个高逼格的工具,写 ...
- 彻底搞懂kubernetes调度框架与插件
调度框架 [1] 本文基于 kubernetes 1.24 进行分析 调度框架(Scheduling Framework)是Kubernetes 的调度器 kube-scheduler 设计的的可插拔 ...
- PHP操作路由器
用PHP操作路由器 我们经常会碰到需要自动换IP的需求,比方模拟点击投票,数据采集被封IP,Alexa作弊等等,也就是需要经常换IP的,我们都可以通过PHP控制路由器来换IP,这样就不需要用按键精灵搞 ...
- mysql Insert强化
INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE] [INTO] tbl_name [(col_name,...)] VALUES ({e ...
- Odoo14 一些好用的开源的模块
# odoo14中一些好用的开源的模块 1.intero_reload_form 刷新按钮(页面数据刷新,而不是按F5刷新整个页面) 2.ms_magic_button 弹框下拉选项 3.sessio ...
- Vue脚手架（CLI）第一天
vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...
- 万答#14，xtrabackup8.0怎么恢复单表
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 实 ...
- 技术分享 | 浅谈mysql语法解析调试方法
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 本文向您介绍一种利用mysql解析器和bison的调试选项进行sql语法解析跟踪 ...
- powershell 执行策略
前言 上一篇博文,我介绍了一下powershell和cmd的对比.通过学习,我发现powershell的确比cmd更加power,也更加适应现在的使用场景. 那么本文将继续介绍一个powershell ...