怎么用js和css写一个幻灯片

怎么用js和css写一个幻灯片

思路如下:

1、创建一个div,用来包裹所有的图片,并设置定位方式为relative;

2、所有的图片设置定位方式为absolute;距离顶部为0;

3、并使用css属性transition给图片加上过渡动画,初始时不透明度为0;

4、使用js的setInterval函数创建定时器,在定时器内先将所有的图片隐藏,再利用下标将需要的图片显示。

(相关课程推荐:JS视频教程

具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 460px;
            height: 240px;
            overflow: hidden;
            position: relative;
        }
        .wrap img{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            transition: all .5s;
        }
        .wrap .show{
            opacity: 1;
        }

    </style>
</head>
<body>
    <div>
        <img src="css3.jpg" alt="">
        <img src="css-4.jpg" alt="">
        <img src="css-5.jpg" alt="">
        <img src="html.jpg" alt="">
        <img src="html1.jpg" alt="">
    </div>

    <script>
        const imgs = document.querySelectorAll('.wrap img');
        let index = 0;
        function changeImg() {
            console.log(index)
            for (let img of imgs) {
                img.className = ''
            }
            imgs[index].className = 'show';
            index = index >= imgs.length - 1 ? 0 : ++index;
        }

        changeImg();
        setInterval(changeImg, 1000)
        
    </script>
</body>
</html>

效果图:

4.gif

Image placeholder
前端答疑
未设置
  34人点赞

没有讨论,发表一下自己的看法吧

推荐文章
pptx 批量操作幻灯片

本文示例使用python-pptx模块批量生成幻灯片,批量修改导入幻灯片表格内容及格式,以及在指定页插入表格 前言一个prs对象就是一棵树,它的下面挂载了多张幻灯片slide,而每张幻灯片下有多个s

如何合并多个js和css文件?

如何合并多个js和css文件?(1)G.js文件~function(){ window.G={}; G.Method={ add:function(){ alert(111); }, sub:func

网页代码中js和css指的是什么?

js指的是什么?js即javascript,是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本

小程序怎么用js修改css?

小程序怎么用js修改css?微信小程序和普通的前端开发有很多不同。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=new

css和js后加问号和数字有什么用?

css和js后加问号和数字有什么用?当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容,浏览器会将他们保存在本地的文件中,下次访问相

jsp中的css写在哪儿

jsp中的css写在哪儿jsp中css写在style标签中,style标签放在head标签里。 .input_textarea{ color:#f00; } 在jsp中加入css样式,就跟ht

css写在哪儿

css写在哪儿第一种:内部样式 //在这里写CSS代码 第二种:行内样式(相关课程推荐:css视频教程) 第三种:外部样式

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

jsp和css的区别是什么?

jsp是什么?JSP全名为JavaServerPages,中文名叫java服务器页面,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码;标签通常以结束。JSP技术有点类似ASP

jsp和css的区别?

一、JSPJSP全名为JavaServerPages,他实现了Html语法中的java扩张(以形式)。JSP与Servlet一样,是在服务器端执行的。通常返回给客户端的就是一个HTML文本,因此客户端

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

html和css难学吗?

什么是HTML?html是HyperTextMark-upLanguage的缩写,即超文本标记语言;html是网页的结构(Structure)。html是用来定义文档内容结构的,包含了用户需要浏览的内

dreamweaver和css的区别是什么?

DreamweaverAdobeDreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业

html和css不换行代码是什么?

html和css不换行代码是什么?一、HTML不换行代码:在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。语法:内容不换行内容

Sass和less的区别有什么?

Sass和less的区别有什么?sass和less主要区别在于实现方式:less是基于JavaScript的在客户端处理所以安装的时候用npm,sass是基于ruby所以在服务器处理。一、less:L

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

使用Jupyter NoteBook进行IB查询和交易,以及使用算法交易示例

在搞好IB盈透接口后,试了下客户端交易,但是最终目的还是使用程序化交易。发现vnpy已经提供的Script_engine来支持JupyterNoteBook交易的,而且非常方便调用。 这里就用写了基于

python使用jieba实现中文文档分词和去停用词

分词工具的选择:  现在对于中文分词,分词工具有很多种,比如说: jieba分词、thulac、SnowNLP等。在这篇文档中,笔者使用的jieba分词,并且基于python3环境,选择jieba分词

不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建U

如何调用jquery?

如何调用jquery?调用jquery首先需要引入jquery文件,有两种方式引入,一种是本地引入,另一种是使用cdn引入。jquery是结构化的开源js文件,按照js文件引用方式使用。1、可以到jQ