用js写出5种不同的轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量722 收藏 5
点赞数 3
分类专栏： js 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72259367/article/details/126593041
版权
前端 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
js
9 篇文章 0 订阅
订阅专栏

1、轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper {
				width: 600px;
				height: 350px;
				margin: 0 auto;
				position: relative;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
			}

			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 1px solid white;
				/* border-radius: 50%; */
			}

			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<img src="./imgs/adt1.png" alt="">
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<script>
			var _img = document.querySelector("img");
			var _wrapper = document.querySelector(".wrapper");
			var _spots = document.querySelectorAll(".btn span");
			var imgs = ['./imgs/adt1.png', './imgs/adt2.png', './imgs/adt3.png', './imgs/adt4.png', './imgs/adt5.png']
			autoplay();
			var id;
			var index = 1;

			function autoplay() {
				id = setInterval(function() {
					_img.src = imgs[index]
					spots();
					index++;
					if (index >= 5) {
						index = 0;
					}
				}, 2000)
			}

			function spots() {
				for (var i = 0; i < _spots.length; i++) {
					if (i == index) {
						_spots[i].className = "active"
					} else {
						_spots[i].className = ""
					}
				}
			}

			//悬浮时停止
			_wrapper.onmouseover = function() {
				clearInterval(id);
			}
			//离开时继续
			_wrapper.onmouseout = function() {
				autoplay();
			}
		</script>
	</body>
</html>

 效果展示：

2、轮播-替换src

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 600px;
				height: 350px;
				margin: 0 auto;
				position: relative;
			}
			img{
				width: 100%;
				height: 100%;
			}
			.btn{
				width:150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left:225px;
				bottom:10px;
			}
			
			.btn span{
				display: block;
				width:15px;
				height:15px;
				border: 3px solid white;
				border-radius: 50%;
			}
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<img src="./imgs/1.png" alt="">
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<script>
			var _img=document.querySelector("img");
			var _wrapper=document.querySelector(".wrapper");
			var _spots=document.querySelectorAll(".btn span");
			var imgs=['./imgs/1.png','./imgs/2.png','./imgs/3.png','./imgs/4.png','./imgs/5.png']
			
			//自动播放
			autoplay();
			var id;
			var index=1;
			function autoplay(){
				id=setInterval(function(){
					_img.src=imgs[index];
					//控制小圆点
					spots();
					index++;
					if(index>=5){
						index=0;
					}
				},2000)
			}
			
			//小圆点变化
			function spots(){
				for (var i = 0; i < _spots.length; i++) {
					if(i==index){
						_spots[i].className="active"
					}else{
						_spots[i].className=""
					}
				}
			}
			//悬浮时停止
			_wrapper.onmouseover=function(){
				clearInterval(id);
			}
			//离开时继续
			_wrapper.onmouseout=function(){
				autoplay();
			}
		</script>
	</body>
</html>

效果展示：

3、轮播-滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				width: 600px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;
				
			}
			img{
			   width: 600px;
			   height: 350px;	
			}
			.contain{
				display: flex;
				width: 3600px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/1.png"/>
				<img src="./imgs/2.png"/>
				<img src="./imgs/3.png"/>
				<img src="./imgs/4.png"/>
				<img src="./imgs/5.png"/>
				<img src="./imgs/1.png"/>
			</div>
		</div>
		<script>
			var _wrapper=document.querySelector(".wrapper");
			var index=0;
			var num=setInterval(function(){
				//滚动一张
				var moveLength=0; //用标识是否走完一张
				var id=setInterval(function(){
					_wrapper.scrollLeft+=8;
					moveLength+=8
					if(moveLength>=600){
						clearInterval(id);
					}
				},20) //一张需要2250毫秒
				index++;
				// 走完所有下标和滚动都要从0开始
				if(index>=6){
					index=0;
					_wrapper.scrollLeft=0;
				}
			},3000)
		</script>
	</body>
</html>

效果展示：

4、轮播-定位left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				width: 600px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			img{
			   width: 600px;
			   height: 350px;	
			}
			.contain{
				display: flex;
				width: 3000px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn{
				width:150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left:225px;
				bottom:10px;
			}
			
			.btn span{
				display: block;
				width:15px;
				height:15px;
				border: 3px solid white;
				border-radius: 50%;
			}
			
			.wrapper a{
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
			
			.wrapper a:nth-of-type(1){
				left: 10px;
				
			}
			.wrapper a:nth-of-type(2){
				right: 10px;
			}
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/1.png"/>
				<img src="./imgs/2.png"/>
				<img src="./imgs/3.png"/>
				<img src="./imgs/4.png"/>
				<img src="./imgs/5.png"/>
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>
		<script>
			var _wrapper=document.querySelector(".wrapper");
			var _contain=document.querySelector(".contain");
			//下一张按钮
			var _nextPic=document.querySelector(".wrapper a:nth-of-type(2)");
			// 上一张按钮
			var _prevPic=document.querySelector(".wrapper a:nth-of-type(1)");
		    //获取所有小圆点
			var _spots=document.querySelectorAll(".btn span");
		
			
			// 下一张
			_nextPic.onclick=function(){
				next_pic();
			}
			var index=0;
			function next_pic(){
				_contain.style.left=_contain.offsetLeft-600+"px";
				if(_contain.offsetLeft<=-3000){
					_contain.style.left=0;
				}
				index++;
				if(index>4){
					index=0;
				}
				spots();
			}
			
		    // 上一张
			_prevPic.onclick=function(){
				prev_pic();
			}
		    function prev_pic(){
		    	_contain.style.left=_contain.offsetLeft+600+"px";
		    	if(_contain.offsetLeft>0){
		    		_contain.style.left=-2400+"px";
		    	}
		    	index--;
		    	if(index<0){
		    		index=4;
		    	}
				spots();
		    }
			
			//自动轮播
			autoplay();
			var id;
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},2000)
			}
			
			//小圆点变化
			function spots(){
				for (var i = 0; i < _spots.length; i++) {
					if(i==index){
						_spots[i].className="active"
					}else{
						_spots[i].className=""
					}
				}
			}
			
			//悬停控制
			_wrapper.onmouseover=function(){
				clearInterval(id);
			}
			_wrapper.onmouseout=function(){
				autoplay();
			}
		</script>
	</body>
</html>

 效果展示：

5、轮播-悬浮定位left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				width: 600px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			img{
			   width: 600px;
			   height: 350px;	
			}
			.contain{
				display: flex;
				width: 3000px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn{
				width:150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left:225px;
				bottom:10px;
			}
			
			.btn span{
				display: block;
				width:15px;
				height:15px;
				border: 3px solid white;
				border-radius: 50%;
			}
			
			.wrapper a{
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
			
			.wrapper a:nth-of-type(1){
				left: 10px;
				
			}
			.wrapper a:nth-of-type(2){
				right: 10px;
			}
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/1.png"/>
				<img src="./imgs/2.png"/>
				<img src="./imgs/3.png"/>
				<img src="./imgs/4.png"/>
				<img src="./imgs/5.png"/>
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>
		<script>
			var _wrapper=document.querySelector(".wrapper");
			var _contain=document.querySelector(".contain");
			var _btn=document.querySelector(".btn");
			//下一张按钮
			var _nextPic=document.querySelector(".wrapper a:nth-of-type(2)");
			// 上一张按钮
			var _prevPic=document.querySelector(".wrapper a:nth-of-type(1)");
			
			var _btn=document.querySelector(".btn");
		    //获取所有小圆点
			var _spots=document.querySelectorAll(".btn span");
		
			
			// 下一张
			_nextPic.onclick=function(){
				next_pic();
			}
			var index=0;
			function next_pic(){
				_contain.style.left=_contain.offsetLeft-600+"px";
				if(_contain.offsetLeft<=-3000){
					_contain.style.left=0;
				}
				index++;
				if(index>4){
					index=0;
				}
				spots();
			}
			
		    // 上一张
			_prevPic.onclick=function(){
				prev_pic();
			}
		    function prev_pic(){
		    	_contain.style.left=_contain.offsetLeft+600+"px";
		    	if(_contain.offsetLeft>0){
		    		_contain.style.left=-2400+"px";
		    	}
		    	index--;
		    	if(index<0){
		    		index=4;
		    	}
				spots();
		    }
			
			//自动轮播
			autoplay();
			var id;
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},2000)
			}
			
			//小圆点变化
			function spots(){
				for (var i = 0; i < _spots.length; i++) {
					if(i==index){
						_spots[i].className="active"
					}else{
						_spots[i].className=""
					}
				}
			}
			
			//悬停控制
			_wrapper.onmouseover=function(){
				clearInterval(id);
			}
			_wrapper.onmouseout=function(){
				autoplay();
			}
			
			
			//悬浮小圆点更新图片
			_btn.onmouseover=function(event){
				//获取悬浮的小圆点
				var target=event.srcElement||event.target;
				if(target.nodeName=='SPAN'){
					//查询小圆点下标
					var n=Array.from(_spots).findIndex(function(tag){
						return tag==target
					})
					//更新下标
					index=n;
					//更新位移
					_contain.style.left=-600*n+"px";
					//更新颜色
					spots();
				}
			}
			
		</script>
	</body>
</html>

效果展示：

 

punching_a
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现轮播图
qq_65528486的博客
08-09 1590
具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 427
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
js实现轮播图的完整代码
10-18
主要为大家详细介绍了js实现轮播图的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1554
class = "current" 用于定位当前显示图片所在位置。
【JavaScript】三种不同的轮播图案例
05-30
常见的轮播图有三种，有缝轮播、无缝轮播和淡入淡出，该资源展示了三种轮播图的一个小案例。 1.有缝轮播（Slideshow）：有缝轮播是最基本的轮播效果。在有缝轮播中，多张图片按照一定的时间间隔依次切换显示。通常，...
原生js写的一个轮播图
08-13
\n\n综上所述，这个“原生js写的一个轮播图”项目展示了JavaScript在前端组件开发中的强大能力，通过面向对象编程实现了可复用和易于维护的代码结构，结合动态加载、动画效果和用户交互，构建了一个功能完善的轮播图...
原生JS实现旋转轮播图+文字内容切换效果【附源码】
10-17
【原生JS实现旋转轮播图+文字内容切换效果】是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片和相应的文字信息。本文将详细介绍如何使用纯JavaScript来实现这一功能，无需依赖jQuery等库。 首先，...
jquery写出PC端轮播图实例
11-26
最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，...
JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解）
tuzi007a的博客
04-30 4628
棒棒糖要原味的~~分享实用干货，让理论简单化。 这两天挤时间仔细做了轮播图效果。并且刚刚搞了个制作动图的小工具，刚好试用一下，来看看效果→_→ 感觉很好玩的样子，哈哈哈哈~ 话说csdn是否考虑在写博客的里面加个表情包，感觉会更好玩啦~（来自一个表情包控的yy*-* ) 老规矩，话不多说，干货奉上→ 读前说明： 1，为了方法简化 效果直观，我这次写的只是一个模板，没有添加图片，而且给盒子都加...
制作一个简单的轮播图（详解新手教学）
A793791182的博客
01-14 2万+
制作一个简单的轮播图（详解新手教学） 相信很多初学者，无论是前端还是后端，对于制作页面时，都想自己亲手制作一个轮播图。 如何制作一个轮播图： 基础知识：有HTML，Css，js基础 本文使用技术： HTML，boostrap，jQuery 先贴代码 页面： &lt;div class="lunbotu row"&gt; &lt;div id="piclist"&gt; &lt...
案例三 、自己写一个轮播图
csdn_zsdf的博客
03-12 2171
当不能用bootstrap外部框架时，自己写一个轮播图。 首先定义一个装所有组件的盒子，div class为content。里面包含了图片区域，底下的小圆圈区域和左右箭头区域。 该案例可以实现点击底下对应的小圆圈换图，点击左右箭头换图，以及自动轮播。 轮播图 *{ margin: 0; padding: 0; } #content{ width: 1000px;
手写轮播图
weixin_51116095的博客
12-17 2416
一个"高级"轮播图 大家好我们今天来整一个高级轮播图，轮播图嘛，大家可能在网上可以找到各种插件，但是我觉得自己会手写轮播图很重要，能帮大家复习一下js前面的知识，如果哪天你去面试，项目经理让你写个轮播图，你说你会用插件，那是不是有点不好呢。废话就不说了，开整。 第一步:先思考写个轮播图需要什么东西。 第二步:用css搭建个模型 第三步:动手写js 首先我们要知道轮播图的图片应为动态添加，这样后期才方便添加别的图片，当然图片的序号也要动态添加，毕竟得与图片数量对应，然后就是要添加页面左右两边的小箭头了(当鼠标
使用JavaScript 实现最简单最基本的轮播图样式
yzq0820的博客
07-09 429
目录一、效果展示二、H5的布局三、CSS的布局四、JS的布局第一步第二步第三步五、源码评论区自取 可以使用自己的图片，需要注意路径 三、CSS的布局 给图片下的小圆点进行布局 四、JS的布局 第一步 第二步 使用点击事件，可以通过小圆点来切换图片 第三步 通过，定义新的值，使用if判断来实现自动点击小圆点，从而实现自动播放的效果.........
用js手写一个轮播图
qq_51705526的博客
05-05 2649
前言 emm, 简单弄一下js轮播图是怎么实现的吧, 前端答辩可能要用到这个! 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
简单轮播图的写法
u013849242的博客
03-30 1146
今天是学习HTML的第12天，给大家分享一下HTML轮播图的写法（只有页面，还写不了效果呢，不足之处还请小伙伴们多多留言） HTML代码如上图 备注：图片多得话可以多添加一些img标签。 轮播图包含： （1）显示区： 此区域大小只需要按照图片大小写即可，溢出部分我们可以使用“overflow-x:hidden”来隐藏。当然，在后面写按钮我们需要为按钮添加定位，需要在该区域CSS中写相对定位...
JavaScript 实现图片轮播
热门推荐
丑小鸭
08-11 8万+
今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述： 使用JS实现轮播的原理是这样的：  假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： 当进行一次轮播后，显示变为下图 显示2： 依次类推。   代码实现： 1 JS 代码： &lt;script type="text/javascript"&gt;     window.onload=function...
用js写一个图片轮播页面
05-25
好的，以下是一个简单的图片轮播页面的实现，使用了JavaScript和...`nextImage` 函数负责切换图片，它移除当前图片的 `active` 类，计算出下一张图片的索引，然后为其添加 `active` 类，实现了图片的轮播效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值