<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的懒人轮播图的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  3. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  4. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  5. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  6. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  9. js原声代码 轮播图

    js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...

随机推荐

  1. C++ 加速（卡常）技巧【超级 快读、快写】

    C++ \texttt{C++} C++ 加速技巧 快读快写 快读 inline int read() { int x = 0, w = 0; char ch = 0; while (!isdigit ...

  2. 题解【洛谷 P1246 编码】

    题目 编码工作常被运用于密文或压缩传输.这里我们用一种最简单的编码方式进行编码:把一些有规律的单词编成数宇. 字母表中共有 \(26\) 个字母 \(\{\tt a,b,\cdots,z\}\),这些 ...

  3. word count的reduce过程以及项目打包部署

    map过程已经写完了,上面那个流程我们涉及到了泛型以及序列化,我们要知道每个参数代表的含义,这样有助于我们理解整个流程. 下面我们开始reduce,这个过程我们要把map输出的键值对把key值相同的放 ...

  4. Linux上安装java

    1,输入命令,查看是否已经安装了Openjdk:rpm -qa | grep java 如果有已经安装的java版本或者版本低于1.7,卸载该jdk:rpm -e 软件包名字 如果不能卸载,可以加上 ...

  5. C#反射跟特性

    一.什么是反射? 了解反射之前我们必须知道一个概念--元数据.有关程序和程序类型的信息叫做元数据,通俗的解释就是类里面的方法.属性.字段等. 而程序在运行的时候去查看其它程序集的行为就叫做反射.在我们 ...

  6. 游戏开发常遇到数据一致性BUG，怎么解？

    摘要:数据副本强一致.全节点可写.存储全面降本,GaussDB(for Redis)重新定义游戏数据库,彻底修复一致性BUG. 本文分享自华为云社区<华为云GaussDB(for Redis)揭 ...

  7. 企业运维实践-Nginx使用geoip2模块并利用MaxMind的GeoIP2数据库实现处理不同国家或城市的访问最佳实践指南

    关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 本章目录 目录 0x00 前言 ...

  8. Taurus.MVC 微服务框架 入门开发教程：项目部署：4、微服务应用程序发布到Docker部署（上）。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Tauru ...

  9. 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程

    大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...

  10. 《Java编程思想》读书笔记（四）

    前言:三年之前就买了<Java编程思想>这本书,但是到现在为止都还没有好好看过这本书,这次希望能够坚持通读完整本书并整理好自己的读书笔记,上一篇文章是记录的第十七章到第十八章的内容,这一次 ...