JavaScript实现轮播图方法一

已于 2022-05-01 21:18:14 修改
阅读量660 收藏
点赞数 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,所有的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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 图片滚动 轮播 多种效果 代码简单 详细
03-31
采用js及jquery技术实现的图片滚动以及滚轮播放效果，简单易用
原生js实现div切换轮播图
m0_53321059的博客
02-17 2717
文章目录轮播图：分析：代码： 轮播图： 轮播图是图片的切换，每隔几秒执行一次。但因为内容比较多，有很多细节需要处理，因而在原生js学习中相对复杂。 笔者在这里提供一种切换div的方式，实现轮播图轮播。 分析： 首先，有几张照片，在最低层的div中，设置其大小可以容纳一张图片（方便之后将图片hidden），在div中放置一个大盒子用来盛放所有的img，这里大盒子的宽度可以用js实现动态变化，笔者在这里大盒子用的是ul，在ul中放li在li中放图片。下面的按钮又是一个盒子，在盒子里边放几个元素，用js设置其居中
JavaScript如何制作轮播图
最新发布
z13903931414的博客
03-27 797
注意，这只是一个非常基础的例子，实际的轮播图可能需要更多的功能，比如过渡效果、指示器、自动播放控制等。如果你需要这些功能，可能需要使用更复杂的代码，或者使用一些现成的JavaScript库。以上代码将创建一个简单的轮播图，每3秒自动更改一次图片，也可以通过点击"Previous"和"Next"按钮来手动更改图片。在JavaScript中实现轮播图可以通过多种方式，但最常见的方式是使用数组来存储图片，然后使用。函数定期更改显示的图片。首先，你需要在HTML中设置一些用于显示图片的。
【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)
zhangawei123的博客
05-28 727
函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。
js实现三个div自动循环轮播 js自动切换显示div js自动轮播显示div
jxyk2007的专栏
11-22 3370
<!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&...
多个div实现轮播效果
小乙的博客
07-07 1万+
四个div实现轮播效果先上效果图图片附件贴代码（自己修改内嵌图片，需要引入jquery库文件） 先上效果图 注：非专业人士，图片视觉效果奇丑，请自觉忽略 图片附件 贴代码（自己修改内嵌图片，需要引入jquery库文件） 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. <!DOCTYPE html> <html lang="zh-CN"> &...
利用javascript实现轮播
ZhaoYulin6的博客
09-08 359
效果图： 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/
JS实现轮播
weixin_44543121的博客
02-22 585
JS实现轮播
原生js实现无限循环轮播图效果
10-20
本文主要介绍了原生js实现无限循环轮播图效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
JS实现简单的轮播图（非常简单，一看就懂）
热门推荐
风丶不会停息
03-15 12万+
主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。li项的实现原理一样，总的来说就是围绕index的值来进行设置...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
JavaScript实现图片轮播的方法
10-23
主要介绍了JavaScript实现图片轮播的方法,使用纯javascript实现图片轮播切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript实现轮播图方法二
04-21
JavaScript实现轮播图方法二，一个img标签，一个函数，一个定时器，打完收工！
详解JavaScript实现动态的轮播图效果
10-17
JavaScript 实现动态轮播图是一种常见的网页交互效果，它能够为用户提供流畅的图像展示体验，通常用于产品展示、幻灯片等场景。本篇文章将深入探讨如何使用 JavaScript 实现这一功能，结合示例代码帮助读者理解和...
js实现轮播图原理及示例
diligentkong的博客
02-15 8万+
网上有很多的例子介绍，在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式： div+css代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text
javascript实现图片轮播
06-07
可以通过以下代码实现Javascript图片轮播： HTML: ```html <img class="sliderImg" src="img1.jpg"> ``` CSS: ```css #slider { width: 500px; height: 300px; overflow: hidden; position: relative...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值