JS实现简单的图片轮播

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量1.8k 收藏 21
点赞数 8
分类专栏： 前端 文章标签： js 图片轮播 定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40949537/article/details/81516256
版权

  看了很多大佬的博客，大佬们的博客写的都非常有水平，小菜鸡今天就用自己的理解方式，按照自己的思路整理一下学习笔记啦！！！

  轮播、轮播自然就是轮流着播放啦！图片轮播简单来说就是给你几张图，按照一定的时间循环播放。我要说的也是这样种极其简单的图片播放。

一、思路

  1. 整体布局，利用<div><img>将图片轮播的雏形展示出来。
  2. 利用CSS样式表，给雏形“化个妆”。
  3. 利用JS用让图片动起来。利用setInterval，循环给照片加上样式，即隐藏和展示的样式。

二、技术

很多大佬的博客中写了一堆的技术点，如果不写几个技术点着实对不起这第一篇博客！我仔细思索了一下，还是决定决定对不起这篇博客了。（因为我感觉技术两个字太高深，我用的是获取元素即定时器等知识点，对，知识点比较合适！）

三、代码实现

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
	h1{
		text-align: center;
	}
	div{
		width:500px;
		height:500px;
		margin: auto;
		top:0;
		right:0;
		bottom:0;
		left:0;
	}
	img{
		width
最低0.47元/天 解锁文章
Ann_Chenyx
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html实现简单图片切换,JavaScript实现简单的图片切换
weixin_39561431的博客
06-04 2215
JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画(可理解为使动画停止)，为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数的id，id作为clearInterval()函数的引用，目的是为了告诉clearInterval()函数动画暂停的位置。下面是实现的代码：一、...
JS简单实现仿网页图片轮播
10-30
本文将深入探讨如何使用JavaScript实现一个简单的图片轮播功能，这将包括自动切换、手动切换以及下标指示器的实现。 首先，我们需要准备HTML结构。一个基本的图片轮播组件通常包含一个容器元素，用于存放所有图片，...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现轮播图的两种方式
h395910638的博客
06-17 467
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
html原生js实现图片轮播,原生js实现简单轮播图
weixin_39975261的博客
06-04 2624
本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构body:网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化css:初始化：包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化css设置：根据图片数与图片宽度设置轮播图宽度二、设置js逻辑需要...
JavaScript实现图片自动轮播
weixin_45746811的博客
11-07 9079
轮播图片、页面定时弹出广告、表单校验。
JS实现轮播图的三种简单方法。
热门推荐
pig_pig32的博客
08-13 6万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
使用JavaScript实现图片的自动轮播
Sun_blog
09-21 5880
在网站开发中，经常会遇到需要展示多张图片并自动切换的需求，这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子，演示如何用JavaScript实现图片的自动轮播，并确保代码占比不高于50%。通过上述步骤，我们成功实现了使用JavaScript来实现图片的自动轮播。在HTML结构中，我们使用标签来表示图片，并给每个图片设置了唯一的id。在CSS样式中，我们使用绝对定位和过渡效果来实现图片切换的动画效果。
html原生js实现图片轮播,原生JS实现图片轮播切换效果
weixin_31706437的博客
06-04 677
原生JS实现图片轮播切换效果2019-01-06编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。首先来分析一下轮播图效果的实现原理：1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden;2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即...
js 实现图片切换（最简单）
m0_69319329的博客
10-16 1836
实现：图片切换。
简单html实现图片轮播,JavaScript实现简易轮播图
weixin_42501974的博客
06-04 1644
JavaScript实现简易轮播图Html代码块：CSS代码：* {margin: 0;padding: 0;}.container {overflow-x: hidden;}.box {height: 260px;display: flex;left: 0;position: relative;}.box img {flex: 1;}我这里使用的是弹性布局，更简洁的将图片排列，不会像float和...
HTML网页js超简单实现图片轮播
weixin_45414490的博客
04-23 9747
其实实现图片轮播很简单 1. 创建一个js文件（自己会的博主不多说） 2. 在html文件引入js文件 引入代码： <script type="text/javascript" src="js/sth.js"></script> 注意：sth是自己的js文件名自行修改 3.写好html图片显示的代码，你也肯定会不多说 诶，还是上代码，要随便定义一张图的id名。 4.最后一...
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
原生js实现点击轮播切换图片
11-21
【原生JS实现点击轮播切换图片】是一个常见的前端网页交互功能，主要目的是通过JavaScript代码实现在用户点击按钮时，图片能够按照指定顺序进行切换，形成一个动态的展示效果。以下将详细介绍实现这一功能的关键技术...
JS 轮播图 图片切换（定时器）
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
html简单实现图片轮播
06-08
HTML和CSS可以结合使用来实现一个简单的图片轮播效果，这里提供一个基础的示例，不涉及JavaScript或jQuery等动态脚本。我们将创建一个包含几张图片的div容器，以及两个按钮来控制图片切换。 首先，你需要在HTML中创建基本结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .carousel { position: relative; width: 100%; overflow: hidden; } .carousel-item { position: absolute; width: 100%; opacity: 0; transition: opacity 1s ease; } .active { opacity: 1; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="carousel-item active" alt="Image 1"> <img src="image2.jpg" class="carousel-item" alt="Image 2"> <!-- 添加更多图片 --> </div> <button id="prev">上一张</button> <button id="next">下一张</button> </body> </html> ``` 接下来，添加一些基本的CSS样式，以及两个按钮的HTML和一些基本的点击事件（假设按钮的ID分别为`prev`和`next`）： ```html <!-- 添加以下CSS到<head>部分上方 --> <style> /* ... (之前的样式) ... */ #prev, #next { position: absolute; bottom: 20px; cursor: pointer; } #prev { left: 20px; } #next { right: 20px; } /* 按钮样式 */ button { padding: 10px 20px; font-size: 16px; } </style> <!-- ... (之前的<body>部分) ... --> <button id="prev">上一张</button> <button id="next">下一张</button> <script> // 假设每张图片都有对应的索引 let currentIndex = 0; function changeSlide(direction) { const items = document.querySelectorAll('.carousel-item'); items.forEach((item, index) => { item.classList.remove('active'); }); const nextItem = direction === 'prev' ? currentIndex - 1 : currentIndex + 1; if (nextItem >= items.length) { nextItem = 0; // 循环处理 } if (nextItem < 0) { nextItem = items.length - 1; // 循环处理 } items[nextItem].classList.add('active'); currentIndex = nextItem; } document.getElementById('prev').addEventListener('click', () => changeSlide('prev')); document.getElementById('next').addEventListener('click', () => changeSlide('next')); </script> ``` 这个例子中的图片轮播是静态的，如果你想添加真正的轮播功能，可以考虑使用JavaScript库如Swiper.js或者使用纯JavaScript结合`requestAnimationFrame`实现动画。如果你对使用这些库感兴趣，我可以为你提供相关的引导。现在，请问： 1. 这种静态图片轮播能满足你的需求吗？ 2. 有没有兴趣了解如何添加轮播动画效果？ 3. 如果你希望用JavaScript实现，还需要什么方面的帮助？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值