原生JS实现小米轮播图和网易云轮播图

最新推荐文章于 2024-06-04 10:29:08 发布
最新推荐文章于 2024-06-04 10:29:08 发布
阅读量1.1k 收藏 23
点赞数 3
分类专栏： JS基础 文章标签： 轮播图 小米轮播图 网易云轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xing476255461/article/details/101167203
版权

文章目录

小米轮播图

实现功能：

  1. 定时切换（2s）
  2. 点击按钮停止切换
  3. 点击向左向右按钮进行相应切换
  4. 鼠标点击下方的小圆点，并进行相应的切换

效果：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米轮播图</title>
    <style>
        *{margin:0;padding: 0;}
        .box{width: 1200px;height: 470px;margin: 100px auto;position: relative;}
        .box div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: opacity 2s;}
        .box div img{width: 1200px;height: 470px;}
        .item{width: 250px;position: absolute;left: 50%;top:90%;transform:translateX(-50%);}
        .item li{list-style: none;width: 12px;height: 12px;border-radius: 50%;border: 1px solid #fff;float: left;margin-left: 30px;display: block;cursor: pointer;}
        .show{background: #ccc;}
        .box span{width: 40px;height: 80px;position: absolute;top:50%;font-size: 20px;text-align: center;line-height: 80px;color: #ccc;background: #333;opacity: .2;cursor: pointer;transform: translateY(-50%)}
        .left{left: 0;}
        .right{right:0;}
    </style>
</head>
<body>
    <div class="box">
        <div style="opacity: 1"><img src="./images/01.jpg" alt=""></div>
        <div><img src="./images/02.jpg" alt=""></div>
        <div><img src="./images/03.jpg" alt=""></div>
        <div><img src="./images/04.jpg" alt=""></div>
        <div><img src="./images/05.jpg" alt=""></div>
        <ul class="item">
            <li class="show"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>
</body>
<script>
    
    class Banner{
        constructor(){
            this.box=document.querySelector(".box");
            this.divs=document.querySelectorAll(".box div");
            this.item=document.querySelector(".item");
            this.lis =document.querySelectorAll("li");
            this.left=document.querySelector(".left");
            this.right=document.querySelector(".right");
            this.time=null;
            this.index=0;

            // 自动切换
            this.automatic();
            // 添加事件
            this.addEvent();
        }
        automatic(){
            var that =this;
            this.time=setInterval(function(){
                that.index++;
                if(that.index>that.divs.length-1){
                    that.index=0
                }
                for(var i=0;i<that.divs.length;i++){
                    that.divs[i].style.opacity=0;
                    that.lis[i].className="";
                }
                that.divs[that.index].style.opacity=1;
                that.lis[that.index].className="show"
            },2000)
        }
        addEvent(){
            var that =this;
            // 添加左按钮事件
            this.left.onclick=function(){
                that.leftclick();
            }
            // 添加右按钮事件
            this.right.onclick=function(){
                that.rightclick()
            }
            // 添加小圆点事件
            this.item.onclick=function(){
                that.itemclick()
            }
        }
        leftclick(){
            // console.log(1)
            // 点击之后先清除计时器
            clearInterval(this.time);
            this.index--;
            if(this.index <0){
                this.index = this.divs.length-1;
            }
            this.clickmove();
        }
        rightclick(){
            clearInterval(this.time);
            this.index++;
            if(this.index>this.divs.length-1){
                this.index=0
            }
            this.clickmove();
        }
        clickmove(){
            console.log(this.index)
            for(var i=0;i<this.divs.length;i++){
                this.divs[i].style.opacity=0;
                this.lis[i].className="";
            }
            this.divs[this.index].style.opacity=1;
            this.lis[this.index].className="show";
            // 点击事件后再开启自动播放
            this.automatic();
        }
        itemclick(){
            // 给每个小圆点添加一个内置属性
            for(var i =0;i<this.lis.length;i++){
                this.lis[i].setAttribute("x",i);
            }
            var that =this;
            // 事件委托
            this.item.onclick=function(eve){
                var e = eve || window.event;
                var target = e.target || e.srcElement;
                if(target.nodeName == "LI"){
                    console.log(target)
                    clearInterval(that.time);
                    for(var i=0;i<that.lis.length;i++){
                        that.divs[i].style.opacity=0;
                        that.lis[i].className="";
                    }
                    that.divs[target.getAttribute("x")].style.opacity=1;
                    that.lis[target.getAttribute("x")].className="show";
                    that.index=target.getAttribute("x");
                    that.automatic();
                }
            }
        }
    }
    new Banner();
</script>
</html>

网易云轮播图

实现功能

  1. 定时切换（3s）
  2. 鼠标放上去停止切换
  3. 点击左右图片进行图片切换
  4. 鼠标放上去显示向左向右按钮，鼠标移下来再次隐藏
  5. 点击向左向右按钮进行相应切换
  6. 鼠标放到下方的线上，停止定时切换，并进行相应的切换
  7. 鼠标离开下方的线，重新开始定时切换
    效果图：
    在这里插入图片描述
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页云轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
        width: 1200px;
        margin: 100px auto;
        }
        ul {
        list-style-type: none;
        position: relative;
        display: flex;
        min-height: 300px;
        margin-bottom: 40px;
        }
        .prev,
        .next {
        cursor: pointer;
        display: none;
        position: absolute;
        top: 44%;
        z-index: 1;
        }
        .prev {
        left: 0;
        }
        .next {
        right: 0
        }
        ul li {
        width: 700px;
        height: 300px;
        position: absolute;
        left: 250px;
        right: 250px;
        transition: all .3s ease-out;
        opacity: 0;
        }
        li img {
        width: 100%;
        height: 100%;
        }
        .now {
        z-index: 1;
        opacity: 1;
        transform: scale3d(1.0, 1.2, 1.2)
        }
        .before {
        transform: translateX(-250px);
        opacity: .8;
        }
        .after {
        transform: translateX(250px);
        opacity: .8;
        }
        .lines {
        display: flex;
        justify-content: center;
        }
        .line {
        width: 20px;
        height: 4px;
        background-color: black;
        margin: 10px 10px;
        }
        .active-line{
        background-color: red;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <ul>
            <span class="iconfont prev">&lt;</span>
            <span class="iconfont next">&gt;</span>
            <li class="now"><img src="./images/1.jpg" alt=""></li>
            <li class="after"><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li class="before"><img src="./images/6.jpg" alt=""></li>
        </ul>
        <div class="lines">
            <div class="active-line line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </div>
</body>
<script>
function nextPic () {
  var picArr = document.querySelectorAll('ul li'),
      len = picArr.length,
      i = 0;
  for (;i < len;i++) {
    if (picArr[i].className == 'after') {
      picArr[(i + 1) % len].className = 'after';
      picArr[i].className = 'now';
      if (i - 1 < 0) {
        picArr[len - 1].className = 'before';
      }else {
        picArr[i - 1].className = 'before';
      }
      //把原来的before删除(原来的now、after都被覆盖掉了)
      if (i == 0) {
        picArr[len - 2].className = '';
      }else if (i == 1) {
        picArr[len - 1].className = '';
      }else {
        picArr[i - 2].className = '';
      }
      break;
    }
  }
}
function prevPic () {
  var picArr = document.querySelectorAll('ul li'),
      len = picArr.length,
      i = 0;
  for (;i < len;i++) {
    if (picArr[i].className == 'before') {
      if (i - 1 < 0) {
        picArr[len - 1].className = 'before';
      }else {
        picArr[i - 1].className = 'before';
      }
      picArr[i].className = 'now';
      picArr[(i + 1) % len].className = 'after';
      //删除之前的after
      picArr[(i + 2)% len].className = '';
      break;
    }
  }
}
function nextLine () {
  // 颜色变化
  var lineArr = document.getElementsByClassName('line'),
      len = lineArr.length;
  for (var i = 0;i < len;i++) {
    if (lineArr[i].className.indexOf('active-line') != '-1') {
      lineArr[i].className = 'line';
      lineArr[(i + 1) % len].className = 'active-line line';
      break;
    }
  }
}
function preLine () {
  // 颜色变化
  var lineArr = document.getElementsByClassName('line'),
      len = lineArr.length;
  for (var i = 0;i < len;i++) {
    if (lineArr[i].className.indexOf('active-line') != '-1') {
      lineArr[i].className = 'line';
      if (i - 1 < 0) {
        lineArr[len - 1].className = 'active-line line';
      }else {
        lineArr[i - 1].className = 'active-line line';
      }
      break;
    }
  }
}
//上一张
function prev () {
  prevPic();
  preLine();
}
//下一张
function next () {
  nextPic();
  nextLine();
}
//初始时定时切换
var timer = setInterval(next, 3000);
//鼠标放到轮播图上，暂停切换,显示prev、next按钮
document.getElementsByClassName('carousel')[0].addEventListener('mousemove', function () {
  clearInterval(timer);
  document.getElementsByClassName('prev')[0].style.display = 'block';
  document.getElementsByClassName('next')[0].style.display = 'block';
}, false)
//鼠标离开轮播图上，重新开始切换，隐藏prev、next按钮
document.getElementsByClassName('carousel')[0].addEventListener('mouseleave', function () {
  timer = setInterval(next, 3000);
  document.getElementsByClassName('prev')[0].style.display = 'none';
  document.getElementsByClassName('next')[0].style.display = 'none';
}, false)
//上一张
document.querySelector('.prev').addEventListener('click', function () {
  prev();
}, false)
//下一张
document.querySelector('.next').addEventListener('click', function () {
  next();
}, false)
//图片点击事件（只有点击before、after有切换）
document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.parentNode.className == 'before') {
    prev();
  }else if (e.target.parentNode.className == 'after') {
    next();
  }
}, false)
//移动到线上，切换图片
document.getElementsByClassName('lines')[0].addEventListener('mouseover', function (e) {
  //只有冒泡到div的类是line的时候才进行判断，其他情况不判断
  if (e.target.className == 'line' || e.target.className == 'active-line line') {
    //暂停切换
    clearInterval(timer);
    var lineArr = this.querySelectorAll('.line'),
        len = lineArr.length,
        target,
        temp,
        acitve;
    //找到active的位置和鼠标的位置
    active = index(lineArr,this.querySelector('.active-line'));
    target = index(lineArr,e.target);
    //进行移动
    temp = Math.abs(target - active);
    if (active > target) {
      while (temp) {
        prev();
        temp--;
      }
    }else {
      while (temp) {
        next();
        temp--;
      }
    }
  }

}, false)
//离开线，重新开始定时切换
document.getElementsByClassName('lines')[0].addEventListener('mouseout', function (e) {
  if (e.target.className == 'line' || e.target.className == 'active-line line') {
    timer = setInterval(next, 3000);
  }
}, false)
//借鉴jquery的index(),找到子元素在父元素中的索引位置(就是给每个子元素添加一个自定义值index)
function index(father,target) {
  var i,
      len = father.length;
  for (i = 0;i < len;i++) {
    father[i].index = i;
  }
  for (i = 0;i < len;i++) {
    if (father[i].index == target.index) {
      return father[i].index;
    }
  }
}
</script>
</html>
星哥真的太难了
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
weixin_42513448的博客
05-31 1714
我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？(要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁)这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明：小米防丢器 遥控自拍解放双手、释放激情解放你的双手，给你充分的空间摆...
Html5如何快速在页面中写出多个轮播图效果
weixin_30751947的博客
09-14 1457
我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？（要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁） 这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明： <!DOCTYPE html><html lang="en">&l...
冬困秋乏春无力-来一份全面的面试宝典洗洗脑，移动设备开发网易云音乐app开发说明
m0_65321095的博客
02-05 2142
灰色保活： 利用系统的漏洞启动前台 Service 黑色保活 所谓黑色保活，就是利用不同的 app 进程使用广播来进行相互唤醒。举个 3 个比较常见的场景： 场景 1： 开机，网络切换、拍照、拍视频时候，利用系统产生的广播唤醒 app 场景 2： 接入第三方 SDK 也会唤醒相应的 app 进程，如微信 sdk 会唤醒微信，支付宝 sdk 会唤醒支付宝。由此发散开去，就会直接触发了下面的 场景 3 场景 3： 假如你手机里装了支付宝、淘宝、天猫、UC 等阿里系的 app，那么你打开任意一个阿里系的 app
BAT、360、新浪 小米 网易等大公司开源项目
flyjava_com的博客
12-02 1182
阿里巴巴开源的好软件太多，请自行选择所需，我列几个我们用的阿里巴巴 Alibaba https://github.com/alibaba/ https://github.com/thx1.分布式key/value存储系统 TairTair是由淘宝网自主开发的Key/Value结构数据存储系统，在淘宝网有着大规模的应用。您在登录淘宝、查看商品详情页面或者在淘江湖和好友“捣浆糊”的时候，都在直接或间接地
2023版完整版web前端学习路线图（超详细自学路线）
热门推荐
千锋教育
09-09 4万+
跟着路线图认真坚持学习从前端小白到大神不是梦，0基础看这一篇足矣！前端计算机常识 ➾ html+css基础 ➾ html+css 项目实践JavaScript基础+进阶 ➾ Ajxa ➾ JavaScript应用项目实践 ➾ Node.js ➾ MongoDB项目实践Vue&React开发：Vue2.0+3.0 ➾ Vue项目实践 ➾ 数据可视化项目 ➾ React ➾ React项目实战 ➾ UmiJS项目公众号&小程序开发。
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 6097
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
大公司都有哪些开源项目~~~阿里，百度，腾讯，360，新浪，网易，小米等
沧羽琉璃
03-01 1786
大公司都有哪些开源项目~~~阿里，百度，腾讯，360，新浪，网易，小米等 文章汇总：https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录： 特点： 特性 特点 功能特性 系统支持及要求 特性 应用特性 应用场景 特点： 功能 Highlights and features APIs 红色字体是现阶段比较火的 ---...
大公司的开源项目~~~阿里，百度，腾讯，360，新浪，网易，小米等
Frankywls的博客
04-09 1641
作者：毒逆天 出处：http://dunitian.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则将其追究法律责任！                        弱者只能独自流泪，黯然神伤；强者却能力挽狂澜，一锤定音！                                0  
2024最全JavaScript基础、核心、进阶大全
最新发布
weixin_56048772的博客
06-04 713
JavaScript 是一种运行在客户端（浏览器）的编程语言ECMAScript( 基础语法 )、web APIs （DOM、BOM）（1）内部：写在里面（2）外部：引用外部js （3）内联：vue框架中 4.变量 计算机中用来存储数据的“容器”，简单理解是一个个的盒子。用来存放数据的。注意变量指的是容器而不是数据。 4.2更新变量： 变量赋值后，还可以通过简单地给它一个不同的值来更新它 //这里先声明未赋值，结果是undefined//可以先使用 在声明，结果不报错是10//可以重复声明,结果是30，后面
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现旋转轮播图+文字内容切换效果【附源码】
10-17
【原生JS实现旋转轮播图+文字内容切换效果】是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片和相应的文字信息。本文将详细介绍如何使用纯JavaScript来实现这一功能，无需依赖jQuery等库。 首先，...
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
原生js实现网易轮播图效果
11-29
一、实现效果图 二、分析布局 主盒子里分上下两个小盒子（1和2）。 包含图片的盒子占两张图片的宽（3），处于上盒子中，当前图片在上盒子（1）中，其它图片在盒子（3）的右侧等待播放。 下边的盒子（2）包括...
数组去重的多种方法
xing476255461的博客
08-27 2万+
在实际工作或面试中，我们经常会遇到“数组去重”问题，接下来就是使用js实现的数组去重的多种方法： 1.将数组的每一个元素依次与其他元素做比较，发现重复元素，删除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5,...
JS数组基础
xing476255461的博客
08-24 1052
介绍 数组(array)是按次序 排列的一组值。其中每一个值都有一个编号(编号默认从0开始). 当我们存储一系列值的时候，通常情况下都会使用数组，这样无论是从存储还是从查询获取等方面都很便捷。 创建 下面我们来说下如何创建一个数组，我们创建数组，通常情况下可以使用下面的两种方式： var arr1 = [1,2,3]; //字面量方式 var arr2 = new Array(...
call、apply和bind
xing476255461的博客
10-19 756
javascript中call和apply以及bind都可以改变this指向 在代码中，当一个对象A具有一个方法fn，另一个对象B没有方法，但是需要用到同样功能的fn方法时，可以通过改变A对象中函数fn的执行上下文(this)来实现调用，达到节约代码空间，不产生冗余函数的目的。(字面量创建对象写法): var A = { name: "AAA", fn: function(skil...
JS中的兼容处理
xing476255461的博客
08-29 630
javaScript中一些常见的兼容性问题整理 1） 滚动条： document.documentElement.scrollTop||document.body.scrollTop 获取样式兼容 function getStyle(dom, styleName){ return dom.currentStyle? dom.currentStyle[styleName] getComputed...
原生js实现自动轮播图
03-24
可以使用 setInterval 和 clearInterval 函数实现自动轮播图。具体的实现代码如下： ``` let sliderIndex = 0; let sliderIntervalId = null; const sliders = document.querySelectorAll('.slider-item'); function displaySlider(index) { sliders.forEach((slider, i) => { if (i === index) { slider.style.display = 'block'; } else { slider.style.display = 'none'; } }); } function startSlider() { sliderIntervalId = setInterval(() => { sliderIndex = (sliderIndex + 1) % sliders.length; displaySlider(sliderIndex); }, 3000); } function stopSlider() { if (sliderIntervalId) { clearInterval(sliderIntervalId); sliderIntervalId = null; } } displaySlider(sliderIndex); startSlider(); ``` 这段代码实现了一个自动轮播图，每隔 3 秒钟自动切换到下一张轮播图，并且在鼠标悬停在轮播图上的时候停止自动轮播，鼠标离开的时候继续轮播。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值