教你如何用JS写一个简单的轮播图

最新推荐文章于 2022-05-17 19:46:44 发布
最新推荐文章于 2022-05-17 19:46:44 发布
阅读量544 收藏 1
点赞数 1
分类专栏： 编程 JS HTML 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44372802/article/details/99660268
版权
编程 同时被 3 个专栏收录
27 篇文章 1 订阅
订阅专栏
JS
6 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏

以下为代码部分：

	<style type="text/css">
		*{
			margin: 0 auto;
			width: %100;
		}
		img{
			height: 500px;
			width: 1000px;
		}
		.left{
			width: 50px;
			height: 50px;
			position: absolute;
			background-color: aliceblue;
			top: 200px;
		}
		.right{
			width: 50px;
			height: 50px;
			position: absolute;
			background-color: aliceblue;
			top: 200px;
			right: 0px;
		}
		.t{
			width: 60px;
			height: 60px;
			background-color: white;
			border-radius: 30px;
			float: left;
			margin-left: 50px;
		}
		.div2 img{
			border: dashed;
			border-color: brown;
		}
		
	</style>
	<script type="text/javascript">
		//窗口
		onload=function(){
			//得到图片
			imageObj=document.getElementById("image");
			//定义时间，设置其属性setInterval
			time=setInterval(changeImg,1000);
		}
		//计数器设置为0 
		count = 0;
		//
		function changeImg(){
			if(count==3){
				count = -1;
			}
			imageObj.src="img/"+(++count)+".jpg";
			changeRadius();
		}
		function changeRadius(){
			radius=document.getElementsByClassName("t");
		
			if(count==0){
				radius[0].style.background="black";
				radius[1].style.background="white";
				radius[2].style.background="white";
				radius[3].style.background="white";
			}
				if(count==1){
				radius[0].style.background="white";
				radius[1].style.background="black";
				radius[2].style.background="white";
				radius[3].style.background="white";
			}
			if(count==2){
				radius[0].style.background="white";
				radius[1].style.background="white";
				radius[2].style.background="black";
				radius[3].style.background="white";
			}
			if(count==3){
				radius[0].style.background="white";
				radius[1].style.background="white";
				radius[2].style.background="white";
				radius[3].style.background="black";
			}
			
		}
		//按钮向左的函数
		function pre(){
			//
			clearInterval(time);
			if(count ==0){
				count =3;
			}
			imageObj.src = "img/"+(--count)+".jpg";
			time = setInterval(changeImg,2000);
		}
		function next(){
			clearInterval(time);
			if(count ==3){
				count =-1;
			}
			imageObj.src = "img/"+(++count)+".jpg";
			time = setInterval(changeImg,1000);
		}
	</script>
</head>
<body>
	<div id="" class="div1" style="width: 1000px; height: 500px; position: relative; ">
		<!--写一个向右走的按钮；中间是一个图片；右边是一个向右走的按钮；  按钮定义两个事件    onclick="pre()" onclick="next()"   -->
		<button id="" class="left" onclick="pre()"><</button>
	<img src="img/0.jpg" id="image"/>
	<button id="" class="right" onclick="next()">></button>
	<!--四个圆，应对着四张图片，定义一个class="t"-->
	<div class="divs" style="position: absolute; margin-left: 200px; top: 400px;">
		<div class="t" style="background-color: black;"></div>
		<div class="t"></div>
		<div class="t"></div>
		<div class="t"></div>
	</div>
	
	</div>
	
	<div class="div2" id="" style="height: 200px; width:%100" >
		<marquee>
			<img src="img/0.jpg"/>
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
		</marquee>
	</div>
东方巴黎～Sunsiny
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS做轮播图
Alisa_Sheng的博客
12-26 2687
首先，我们得做出一个轮播时候样式的原型： 我们要做的呢就是这种，当到轮播主图的时候有一个放大的效果；选择第2,3,4张图片作为轮播的：左图，主图，右图； 怎么操作呢？这里先预讲一下方法： 1、建立一个数组 2、创建：一个ul标签，5个li标签，5个img标签； 设定各自的样式，把img放到li中，li放到ul中，再把li放到数组中； 3、用到数组的push(),pop(),unshift(),shift()方法实现，例：轮播时将5（第五张图片）删除，并到数组头部，以此循环 话不多...
用JS写轮播图
wenqi1的博客
02-19 887
该轮播图可实现每隔1秒跳转至下一图片，左右两个箭头可以控制图片前后移动，下面的数字圆圈可以实现点击便跳转到相应图片。 图片比盒子设定的宽高大也没关系，在CSS中设定了overflow隐藏，溢出部分将不显示。 下面是代码： lunbotu.html 轮播图的结构部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" co.
纯JS写的一个轮播图
Hallin_Me的专栏
04-20 9714
最近学习了一下JavaScript，按照其他代码的思路，我写了一个JS的轮播图。代码如下： *{ padding:0px; margin: 0px; } #box{ width: 490px; height: 170px; overflow: hidden; position: relative; background-
JS实现一个简单的轮播图
qq_41557320的博客
10-11 388
主要代码如下： &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
纯js写的轮播图
09-05
纯粹用js写的图片轮播图 效果等同于京东页面的轮播图。 解压后直接拿来就能用 解压后直接拿来就能用 解压后直接拿来就能用
一步一步教你写淡入淡出带注释的图片轮播插件（一）
09-05
【淡入淡出图片轮播插件开发教程】 在网页设计中，图片轮播插件是一种...通过这个教程，开发者可以学习到如何用JavaScript原生代码实现一个功能完备、可配置的图片轮播插件，同时也能理解到代码组织和优化的重要性。
手把手教你用纯css3实现轮播图效果实例
09-27
轮播图的基础结构通常包含一个包含所有图片的容器（`<section>`）和一系列的图片列表项（`<li>`）。在HTML部分，我们可以看到这样的布局： ```html <li class="slider-item slider-item1"></li> ...
轮播图，完全用JavaScript写的，没用到jQuery很适合js初学者学习
11-12
通过这个简单的JavaScript轮播图实例，我们可以深入理解DOM操作、事件处理和CSS动画等基础知识。随着技能的提升，你可以进一步完善轮播图的功能，使其更符合实际项目的需求。在实践中学习JavaScript，是提高编程技能...
JS简单实现仿网页图片轮播
10-30
这个简单的图片轮播教程只是一个起点，帮助你理解如何运用JavaScript来操控DOM元素和实现动态效果。在实际项目中，还可以结合其他技术，如CSS动画和框架（如React或Vue.js）来进一步提升轮播组件的性能和可维护性。
手写js轮播图.zip
08-20
至此，一个基础的JavaScript轮播图已经实现。不过，为了提高用户体验，我们还可以添加更多功能，比如动画过渡效果、自动播放暂停、触屏滑动切换等。这些都是JavaScript轮播图进阶的话题，可以根据实际需求进一步学习...
用js和html写一个js轮播图
混世小妲己
08-30 2669
原文写的特别好，原本打算自己措词的，但是感觉人家说的太好了。我照搬过来。只有要思路正确，代码会自然写出来的 转载：https://www.jb51.net/article/121904.htm 思路： 首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片 Container内有个放图片的list进行position的定位...
JS实现轮播图
WYF857446152的博客
05-17 7065
用JS实现轮播图
用js写轮播图
ASLlife的博客
04-15 1103
<script type="text/javascript"> //获取当前图片的下标 var num = 0; //获得图片的一串数组元素 var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a"); //获取li的数组元素 var li ...
用js制作轮播图，请放心食用。
D_98k的博客
09-09 262
轮播图，会用在很多地方，虽然网上有很多资源可以直接使用，但是又很多人都不知道原理，那么我们今天就来聊一下如何制作一个完整的轮播图 （为了不浪费时间 ，html、css样式我会直接给出） css样式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&gt..
手把手教你用JS写一个图片轮播效果
李公子的博客
10-29 457
1、前言 写页面的时候，有些地方经常会用到一些轮播图，比如主页Banner的轮播，或者在页面最下面的小图片轮播，这篇文章就教大家如何写一个小的轮播效果。 2、正文 先放一张效果图。 图片轮播 然后直接看代码吧。看一下代码，在讲里面的原理。 &lt;div id="content"&gt; &lt;div id="content_img"&gt; ...
如何写一个轮播
梦幻小龙虾
02-23 334
如何写一个轮播 开发工具与关键技术：Visual Studio + MVC + SQL Server + .Net 作者：刘敏 撰写时间：2019年2月20日 一、功能实现 1、在做项目的时候有很多地方都要用的轮播，下面跟大家分享一个简单的轮播： 1）代码： @{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;he...
使用javascript实现简单的轮播图效果
liuying1802028915的博客
10-24 1768
最近在做公司的网站，有一个轮播图的功能，网上倒是有现成的js组件，我用了一下swiper,但是发现嵌入进去时不太好用，好在公司的网站要求也不是很高，索性就使用纯的js做一下呗。 1.首先新建一个html页面，先把简单的布局做出来 我的html部分如下
简单轮播图的写法
u013849242的博客
03-30 1150
今天是学习HTML的第12天，给大家分享一下HTML轮播图的写法（只有页面，还写不了效果呢，不足之处还请小伙伴们多多留言） HTML代码如上图 备注：图片多得话可以多添加一些img标签。 轮播图包含： （1）显示区： 此区域大小只需要按照图片大小写即可，溢出部分我们可以使用“overflow-x:hidden”来隐藏。当然，在后面写按钮我们需要为按钮添加定位，需要在该区域CSS中写相对定位...
js简单的轮播图的写法
tylls的博客
07-09 265
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {
用javascript写一个轮播图
最新发布
08-14
要用JavaScript来编写一个简单的轮播图，可以按如下步骤进行： 1. 首先，创建一个HTML文件，包含一个包裹轮播图的容器元素。例如： ```html <div id="slideshow"></div> ``` 2. 在JavaScript文件中，获取轮播图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值