怎么用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标签来实现。语法:内容不换行内容

10个HTML和CSS必须知道的重点难点问题

推荐课程:零基础入学、web全栈开发就业班、拿到offer再缴费--融职教育 网页设计自学平台 互联网时代怎能不懂一点设计和代码 1.怎么让一个不定宽高的DIV,垂直水平居中? 使用Flex 只需要在

使用HTML和CSS构建网站的好处

课程推荐:前端开发工程师--学习猿地精品课程 HTML和CSS网站的6个好处 HTML和CSS网站被认为是静态的,因为内容(文本,图像等)被编码到每个页面中,并且它不使用服务器技术(如动态网站那样)将

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的值

使用js来设置、读取、删除cookie的最佳代码(附换肤应用)

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 继上一篇文章中我们讲到cookie的概念,今天我们来写如何用js来设置cookie、读取cookie、删除cookie。本文代码来自网络

使用Javascript 开发个JSON解析库

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 现在无论什么编程语言都有很多的json解析库了,之所以写这个么软件,不是为了在实际的项目开发中使用它,而是为了锻炼自身的编程技巧,还是那

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

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