JavaScript实现轮播图方法一

已于 2022-05-01 21:18:14 修改
阅读量694 收藏
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript HTML CSS
于 2022-04-20 20:59:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjhqukq/article/details/124306081
版权
本文介绍了如何使用JavaScript动态生成多个div元素，并通过数组操作控制其display属性，实现轮播图效果。代码示例详细展示了HTML、CSS和JavaScript的配合，以及作者分享的玩转JavaScript的心得体会。
摘要由CSDN通过智能技术生成

JavaScript实现轮播图方法一

多个DIV,所有的DIV都由JavaScript生成，每个DIV的className均为photo,再通过数组来操控每个DIV的display属性

效果展示

在这里插入图片描述

主要代码

JavaScript

	let Maximum = 8;
	
    function generateElement()//给body添加div
    {

        let body = window.document.getElementById("body");
        let photoDiv;
        for (let i = 0; i < Maximum; i++) {
            photoDiv = window.document.createElement("div");
            // ----------------------------------------------------两句代码都是设置class属性值
            photoDiv.setAttribute("class", "photo");
            // photoDiv.className = "photo";
            // ----------------------------------------------------两句代码都是设置id属性值
            photoDiv.setAttribute("id", i+1+"");
            // photoDiv.id=i+1+"";
            // ----------------------------------------------------
            photoDiv.style.backgroundImage = "url('image/" + (i + 1) + ".jpg')"
            body.appendChild(photoDiv);
        }
        // 最顶层置上一层薄纱
        let veilDiv=window.document.createElement("div");
        veilDiv.setAttribute("class","veil");
        // veilDiv.className=veil";
        body.append(veilDiv);
    }

    let index = 0;
    let photos = window.document.getElementsByClassName("photo");
    
    function turn()//轮播图
    {
        if (index==photos.length)
        {
            index = 0;
        }
        for (let i = 0; i < photos.length; i++) {
            photos[i].style.display = "none";
        }
        photos[index].style.display = "block";
        index++;
    }

    generateElement();
    setInterval(turn, 2000);//每隔两秒调用一次轮播图函数

CSS

 body
        {
            margin: 0;
            padding: 0;
            background-color: #FDE6E0;
        }

        .photo
        {
            width: 100%;
            height: 100%;
            /*background-image: url("image/1.jpg");*/
            background-size:cover;
            background-repeat: no-repeat;
            position: absolute;
        }
        .veil
        {
            width: 100%;
            height: 100%;
            background-color: #E9EBFE;
            opacity:0.3;
            position: absolute;
        }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>turnPhoto1</title>
</head>
<body id="body">

</body>
</html>

玩JavaScript的感受

代码不难，粗心就会出错！

细心，耐心！

yjhqukq
关注
专栏目录
用jquery或js实现三个div自动循环轮播
weixin_30888027的博客
09-14 1325
//3个div的统一class='div' varindex=0; //3秒轮播一次 vartimer=setInterval(function(){ index=(index==2)?0:index+1; //某个div显示，其他的隐藏 $(".div").hide().eq(index).show();...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
如何用javascript实现轮播图效果
winneryy的博客
01-27 160
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } .container { position: relative; w.
js实现多功能轮播图
weixin_45000814的博客
04-04 472
自动轮播的效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
js实现左右轮播效果
limin12345678910的专栏
08-19 969
js 左右轮播图效果
js实现三个div自动循环轮播 js自动切换显示div js自动轮播显示div
jxyk2007的专栏
11-22 3484
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js自动切换显示div</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script&...
JavaScript实现轮播图方法二
04-21
本篇文章将深入探讨如何使用JavaScript实现轮播图，特别是通过一种简单的方法——"方法二"。 首先，我们需要理解HTML的基础结构。在"turnPhoto2.html"文件中，通常会包含一个`<div>`元素作为轮播图容器，以及一系列...
JavaScript实现图片轮播组件代码示例
10-21
本文将详细解析使用JavaScript实现图片轮播组件的过程，包括其关键技术和实现方法。图片轮播组件是一种常见的网页元素，用于在有限的显示空间内展示多张图片，通常具有自动播放和手动切换等功能。 首先，需要了解...
JavaScript实现图片轮播的方法
10-23
实现图片轮播的方法有多种，其中使用JavaScript实现是一种纯前端的技术手段，不依赖于任何第三方库如jQuery，可直接通过原生JavaScript来操作DOM元素，实现图片的自动播放和切换。下面将详细介绍使用纯JavaScript...
js 图片滚动 轮播 多种效果 代码简单 详细
03-31
采用js及jquery技术实现的图片滚动以及滚轮播放效果，简单易用
原生js实现无限循环轮播图效果
10-20
本文主要介绍了原生js实现无限循环轮播图效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript实现简单图片轮播效果
10-19
JavaScript实现简单图片轮播效果的知识点主要包括以下方面： 1. 图片轮播基本原理：图片轮播是一种常见的网页交互效果，主要用于展示多张图片。一般通过定时器或手动触发事件来改变显示图片的位置，从而实现图片的...
利用javascript实现轮播
ZhaoYulin6的博客
09-08 390
效果图： 1.创建html结构 <div id="bigdiv" onmouseover="stopInterval()" onmouseout="startInterval()"> <div id="one" class="divlun"><img src="imglun/01.png" alt=""></div> <div id="two" class="divlun"><img src="imglun/
【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)
最新发布
zhangawei123的博客
05-28 754
函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。
原生js实现div切换轮播图
m0_53321059的博客
02-17 2788
文章目录轮播图：分析：代码： 轮播图： 轮播图是图片的切换，每隔几秒执行一次。但因为内容比较多，有很多细节需要处理，因而在原生js学习中相对复杂。 笔者在这里提供一种切换div的方式，实现轮播图轮播。 分析： 首先，有几张照片，在最低层的div中，设置其大小可以容纳一张图片（方便之后将图片hidden），在div中放置一个大盒子用来盛放所有的img，这里大盒子的宽度可以用js实现动态变化，笔者在这里大盒子用的是ul，在ul中放li在li中放图片。下面的按钮又是一个盒子，在盒子里边放几个元素，用js设置其居中
JS实现轮播图（手动切换+自动切换两种方法）
热门推荐
dweblover的博客
02-13 5万+
1.轮播图效果图 2.完整代码如下 &amp;amp;amp;lt;!doctype html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;utf-8&amp;amp;quot;&amp;amp;amp;gt
JS+DIV 实现轮播图(三)
mixi9760的博客
07-30 5325
效果图 原理 代码效果图原理：代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; padding: 0px; }
原生js实现多功能可滑动轮播图
Iguodala的博客
03-21 1358
效果图： 这次做的轮播图，值得注意的主要功能有： 1、滑动动画切换效果(无缝衔接)； 2、标签和略缩图点击切换效果(自适应性滑动，不同距离滑动速度不同)； 3、自动循环播放； 4、鼠标悬浮在轮播图上时停止自动播放。 难点： 1、循环滑块动画切换效果，主要的算法也集中在这里。我的方法是前后多放一张图，然后在切换结束后的一刻瞬间改变参数，这样就不会有一闪而过同时还能无缝衔接的效果； ...
JavaScript实现轮播图案例解析
### 实现轮播图的步骤 #### 1. 准备工作 - 设计好HTML结构，确保图片可以被正确地引入和显示。 - 编写CSS样式，设置轮播图的基本样式和动画效果。 #### 2. JavaScript实现 - 获取DOM元素：使用`document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值