ES6面向对象淡入淡出无缝轮播图

最新推荐文章于 2022-11-02 20:11:05 发布
最新推荐文章于 2022-11-02 20:11:05 发布
阅读量986 收藏 1
点赞数
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BeiBeiTian/article/details/81025584
版权
这是一个使用HTML、CSS和ES6编写的淡入淡出无缝轮播图示例。通过创建Fade类及其子类FadeChildren，实现了鼠标悬停暂停和自动播放功能，以及选项按钮和箭头的切换控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>Document </title>
<style>
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

a,
img {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}

#wrap {
width: 500px;
height: 300px;
position: relative;
margin: 20px auto;
border: 1px solid #ddd;
}

#list {
width: 500px;
height: 300px;
position: relative;
}

#list li {
position: absolute;
left: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in;
}

#list li.block {
opacity: 1;
}

#option {
width: 100px;
height: 20px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
display: flex;
flex-direction: row;
justify-content: space-between;
}

#option li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
border: 1px solid #fff;
}

#option li.active {
background: skyblue;
}

#btn a {
width: 40px;
height: 60px;
background: rgba( 0, 0, 0, .3);
color: #fff;
line-height: 60px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -30px;
}

#btn a.prev {
left: 0;
}

#btn a.next {
right: 0;
}
< /style>
</head>

<body>
<div id= "wrap" >
    <ul id= "list" >
        <li class= "block" >
            <a href= "###" >
            <img src= "./img/1.jpg" alt= "" >
            </a>
        </li>
        <li>
            <a href= "###" >
                <img src= "./img/2.jpg" alt= "" >
            </a>
        </li>
        <li>
            <a href= "###" >
                <img src= "./img/3.jpg" alt= "" >
            </a>
        </li>
        <li>
            <a href= "###" >
                <img src= "./img/4.jpg" alt= "" >
            </a>
        </li>
    </ul>
    <ul id= "option" >
        <li class= "active" ></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id= "btn" >
        <a href= "###" class= "prev" > &lt; </a>
        <a href= "###" class= "next" > &gt; </a>
    </div>
</div>

<script>
        class Fade {
            constructor( oListLi, oPtionLi, oBtn) {
            this. oListLi = oListLi;
            this. oPtionLi = oPtionLi;
            this. oBtn = oBtn;
            this. len = oPtionLi. length;
            this. index = 0;
        }
        init() {
            this. optionSwitch();
            this. btnSwitch();
        }

        optionSwitch() {
            for ( let i = 0; i < this. len; i++) {
                this. oPtionLi[ i]. addEventListener( "mouseover", () => {
                this. oPtionLi[ this. index]. className = "";
                this. oPtionLi[ i]. className = "active";
                this. oListLi[ this. index]. className = "";
                this. oListLi[ i]. className = "block";
                this. index = i;
               })
            }
          }

          btnSwitch() {
                for ( let i = 0; i < 2; i++) {
                    this. oBtn[ i]. addEventListener( "click", () => {
                    this. oPtionLi[ this. index]. className = "";
                    this. oListLi[ this. index]. className = "";
                    if ( i) {
                           this. index++;
                    if ( this. index == this. len) {
                            this. index = 0
                    }
                    } else {
                        this. index--;
                    if ( this. index == - 1) {
                    this. index = this. len - 1
                    }
                    console. log( this. index)
                }
                    this. oPtionLi[ this. index]. className = "active";
                    this. oListLi[ this. index]. className = "block";
                  })
                }
               }
              }


        class FadeChildren extends Fade {
            constructor( oListLi, oPtionLi, oBtn, wrap) {
            super( oListLi, oPtionLi, oBtn);
            this. wrap = wrap;
            this. timer = null;
        }
        init() {
            this. play();
            this. pause();
            this. optionSwitch();
            this. btnSwitch();
        }

        play() {
            clearInterval( this. timer);
            this. timer = setInterval(() => {
            this. oPtionLi[ this. index]. className = "";
            this. oListLi[ this. index]. className = "";
            this. index++;
            if ( this. index == this. len) {
            this. index = 0
         }
            this. oPtionLi[ this. index]. className = "active";
            this. oListLi[ this. index]. className = "block";
            }, 2000)
        }

        pause(){
            this. wrap. addEventListener( "mouseover",() =>{
            clearInterval( this. timer);
        });
            this. wrap. addEventListener( "mouseout",() =>{
            this. play()
          })
        }
       }

        let oListLi = document. querySelectorAll( "#list li");
        let oPtionLi = document. querySelectorAll( "#option li");
        let oBtn = document. querySelectorAll( "#btn a");
        let wrap = document. querySelector( "#wrap")
         /* console.log(oListLi,oPtionLi,oBtn) */
        /* new Fade(oListLi,oPtionLi,oBtn).init(); */
        new FadeChildren( oListLi, oPtionLi, oBtn, wrap). init()


< /script>
</body>

</html>
前端领域 Sass 轮播图的实现与优化
小白菜的博客
04-30 530
轮播图(Carousel)是现代网站中最常见的UI组件之一，用于在有限空间内展示多个内容项。传统的CSS实现方式往往会导致代码冗余、维护困难，而Sass作为CSS预处理器能够显著提升开发效率和代码质量。系统介绍Sass在轮播图实现中的应用提供可复用的最佳实践方案深入分析性能优化策略探讨响应式设计和可访问性考虑本文覆盖从基础实现到高级优化的完整知识体系，适合有一定HTML/CSS基础的前端开发者。首先介绍Sass基础及其在轮播图中的价值然后详细讲解实现步骤和核心算法。
前端 基础面试问题汇总
技术改变世界
04-24 1292
1&gt;、html5有哪些新标签？ &lt;article&gt; 标签定义外部的内容（外部内容如blog,news）。 &lt;aside&gt; 标签定义article以外的内容（可用做文章的侧栏）。 &lt;canvas&gt;使用JavaScript在网页上绘制图形图像。 &lt;details&gt; 用于描述某个文档部分的内容。 &lt;sum...
无缝滚动轮播图
08-19
JS实现无缝滚动轮播图，支持点击，有索引，自动轮播
面向对象淡入淡出轮播图(附带面向过程)
bangai2527的博客
12-15 184
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> </body></body><title>面向对象淡入淡出轮播</title><link rel="stylesheet" type="text/css" hre...
js中用面向对象的思想——淡入淡出轮播图
优快云908485986的博客
09-17 257
首先看下效果图 明确功能 1.前后切换（边界判断） 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style:none; } #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position...
javascript_面向对象_轮播图（淡入淡出）_ES3_使用prototype和构造函数
jiang7701037的博客
01-24 631
解释：        1、该轮播图的切换效果是淡入淡出        2、该轮播图使用了prototype属性，解决了上一版“http://blog.youkuaiyun.com/jiang7701037/article/details/78963256” javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题 效果图： 代码： HTML代码：
面向对象无缝滚动轮播(附带面向过程代码)
bangai2527的博客
12-13 166
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>banner</title> <link rel="stylesheet" href="CSS/main1.css"> </head> <bod...
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4360
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
javascript_面向对象_轮播图（淡入淡出）没有使用prototype
jiang7701037的博客
01-03 480
解释：        1、该轮播图的切换效果是淡入淡出        2、该轮播图还没有使用prototype属性，只是把对象所有的方法（函数）放到了构造函数里，后期讲到prototype时，再补上 效果图： 思路示意图： 代码： 1)、HTML代码 *{ margin:0; padding:0;
es6 面向对象选项卡（自动轮播功能）
weixin_30487701的博客
09-13 204
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0} ...
原生js实现轮播图（左右活动+淡入淡出）详解.zip
04-10
功能：通过修改创建对象时的参数，可实现左右滑动轮播图或者淡入淡出轮播图 两种模式的区别主要体现在两种模式的不同布局与样式，具体详解请看代码注释。 此轮播图的前提是已经写好了html结构，结构上可适当增加图片标签 img ，那么也要随之增加对应的 li 标签以及创建对象时的链接数组。
js面向对象实现无缝轮播图
dydjtb的博客
07-03 1939
下面是实现代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面向对象轮播图</title> <style type="text/css"> *{ margin: 0; padding
用面向对象方法写的轮播图效果
weixin_30691871的博客
02-08 124
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/...
轮播图es6做法最完整版，自动播放，按钮换图。。。
we_lpc的博客
10-19 243
此代码是通过es6最新版本语法操作，更好的解决轮播图问题，其中利用排他思想，也是最新的一个方法，对大家很有帮助！！
ES6之面向对象--类
CHL博客
11-23 677
类 class Person{ constructor(name="dg",age=60){ this.name=name; this.age=age; } showMSG(){ //定义在原型上console.log(this.age,this.name) } print(){ //定义在原型上...
es6轮播图 无缝轮播
qq_38371250的博客
06-15 453
class swiper { constructor(options) { // swiper容器 this.el = document.getElementById(options.el); // swiper容器 if(!this.el) return console.error("null"); // swiper容器 滚动内容主体 this.swiperEl = document.getElementById
无缝轮播图，使用ES6面向对象的方法，模仿封装
qq_42913483的博客
11-02 206
无缝轮播图，使用ES6面向对象的方法，模仿封装。
ES6系列六：面向对象
苍穹尘的博客
05-13 578
原来写法  类和构造函数一样  属性和方法分开写的 // 老版本 function User(name, pass) { this.name = name this.pass = pass } User.prototype.showName = function () { console.log(this.name) } User.prototype.showPass =...
面向对象ES6-实现简单双色球效果
weixin_52986933的博客
01-27 362
Document
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值