原生js手动轮播图

最新推荐文章于 2024-08-01 13:20:05 发布
最新推荐文章于 2024-08-01 13:20:05 发布
阅读量100 收藏
点赞数
分类专栏： 前端 文章标签： js
原文链接：https://www.mk2048.com/blog/blog.php?id=hai0bjib2a1j&title=%E5%8E%9F%E7%94%9Fjs%E6%89%8B%E5%8A%A8%E8%BD%AE%E6%92%AD%E5%9B%BE
版权

      手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。

轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生js手动轮播图。

 

 

 

 

 

一，利用JavaScript制作手动轮播图，首先排版。

引入默认样式表（可以手写）；

	<link rel="stylesheet" href="css/Default style sheet.css" />//本博客有css默认样式表可以下载。

 div排版布局：

<body>
  <div id="box">
			<div id="lunbo"><img src="img/1.jpg" id="img"/></div>
			<div id="left"><</div>
			<div id="right">></div>
			<div id="radiu">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>
	</body>

 二，定义div的CSS样式，给div设置宽高，定位。

<style>
			body{
				background: darkturquoise;
			}
			#box{
				height:320px;
				width:480px;
				margin: 3px auto;
				border: 2px solid red;
			}
			#lunbo{
				height: 292px;
				width:453px;
				border: 1px solid yellow;
				margin: 0px auto;
				position: relative;
			}
			#left{
				height: 60px;
				width: 60px;
				font-size: 60px;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top:150px;
				left: 440px;
				color: black;
			}
			#right{
				height: 60px;
				width: 60px;
				font-size: 60px;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top:150px;
				left: 880px;
				color: black;
			}
		#radiu{
				height: 30px;
				width: 240px;
				text-align: center;
				
				margin: 0px auto;
			}
			#radiu li{
				float: left;
				background: white;
				height: 30px;
				width: 30px;
				line-height: 30px;
				border-radius:50% ;
				margin-right:6px;
			}
			.active{
				background: orange;
				color: ;
			}
		</style>

 原生js代码：

<script>
				window.onload=function(){
				var ridiu=document.getElementById("radiu")
				var right=document.getElementById("right");
				var left=document.getElementById("left")
				var img=document.getElementById("img");
				var oli=ridiu.getElementsByTagName("li")
				var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
			   var a=null;
			 
			    	right.onclick=function(){
			    		a  
			    		if(a>arry.length-1){
			    			a=0;
			    			}
			    	
			    		img.src=arry[a]
			  }
			    	left.onclick=function(){
			    		a--
			    		if(a<0){
			    			a=arry.length-1;
			    			}
			    	
			    			img.src=arry[a]
			    
			    }
			    	
			    	for (var i=0;i<oli.length;i  ) {
			    		
			    		oli[i].onclick=function(){
			    			a  
			    	    if(a==arry.length){
			    			a=0;
			    			}
			    	        img.src=arry[a];
			    		}
			    		
			    	}
			
			}
		</script>

 HTML全部效果代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手动轮播图</title>
		<link rel="stylesheet" href="css/Default style sheet.css" />
		<style>
			body{
				background: darkturquoise;
			}
			#box{
				height:320px;
				width:480px;
				margin: 3px auto;
				border: 2px solid red;
			}
			#lunbo{
				height: 292px;
				width:453px;
				border: 1px solid yellow;
				margin: 0px auto;
				position: relative;
			}
			#left{
				height: 60px;
				width: 60px;
				font-size: 60px;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top:150px;
				left: 440px;
				color: black;
			}
			#right{
				height: 60px;
				width: 60px;
				font-size: 60px;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top:150px;
				left: 880px;
				color: black;
			}
		#radiu{
				height: 30px;
				width: 240px;
				text-align: center;
				
				margin: 0px auto;
			}
			#radiu li{
				float: left;
				background: white;
				height: 30px;
				width: 30px;
				line-height: 30px;
				border-radius:50% ;
				margin-right:6px;
			}
			.active{
				background: orange;
				color: ;
			}
		</style>
		<script>
			window.onload=function(){
				var ridiu=document.getElementById("radiu")
				var right=document.getElementById("right");
				var left=document.getElementById("left")
				var img=document.getElementById("img");
				var oli=ridiu.getElementsByTagName("li")
				var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
			   var a=null;
			 
			    	right.onclick=function(){
			    		a  
			    		if(a>arry.length-1){
			    			a=0;
			    			}
			    	
			    		img.src=arry[a]
			  }
			    	left.onclick=function(){
			    		a--
			    		if(a<0){
			    			a=arry.length-1;
			    			}
			    	
			    			img.src=arry[a]
			    
			    }
			    	
			    	for (var i=0;i<oli.length;i  ) {
			    		
			    		oli[i].onclick=function(){
			    			a  
			    	    if(a==arry.length){
			    			a=0;
			    			}
			    	        img.src=arry[a];
			    		}
			    		
			    	}
			
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="lunbo"><img src="img/1.jpg" id="img"/></div>
			<div id="left"><</div>
			<div id="right">></div>
			<div id="radiu">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>
	</body>
</html>

 效果图：

body{
                background: darkturquoise;
            }
            #box{
                height:320px;
                width:480px;
                margin: 3px auto;
                border: 2px solid red;
            }
            #lunbo{
                height: 292px;
                width:453px;
                border: 1px solid yellow;
                margin: 0px auto;
                position: relative;
            }
            #left{
                height: 60px;
                width: 60px;
                font-size: 60px;
                text-align: center;
                line-height: 60px;
                position: absolute;
                top:150px;
                left: 440px;
                color: black;
            }
            #right{
                height: 60px;
                width: 60px;
                font-size: 60px;
                text-align: center;
                line-height: 60px;
                position: absolute;
                top:150px;
                left: 880px;
                color: black;
            }
        #radiu{
                height: 30px;
                width: 240px;
                text-align: center;
                
                margin: 0px auto;
            }
            #radiu li{
                float: left;
                background: white;
                height: 30px;
                width: 30px;
                line-height: 30px;
                border-radius:50% ;
                margin-right:6px;
            }
            .active{
                background: orange;
                color: ;
            }


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_36320160
关注
专栏目录
原生JS实现手动轮播图效果实例代码
10-17
本文将详细介绍如何使用原生JavaScript实现手动轮播图效果。 首先，手动轮播图的实现需要对HTML、CSS和JavaScript有一定的理解。HTML负责页面结构，CSS用于样式设置，而JavaScript则用于实现动态交互功能。 在HTML...
手搓js轮播图_JavaScript进阶
成长之路，任重道远，期待你的关注！
11-21 125
实际结构就像下面的图片，就好比你从你家窗户向外看行驶的火车（先假设你家旁边有条火车轨道），你通过窗户之能看到一节一节的火车车厢在切换，而不是整条火车。鼠标移入的时候大概率表示用户有要操作播放的“嫌疑”，所以暂定自动播放，把操作权给用户，当用户把鼠标移走的时候再开始自动播放。为了使得切换有序，这里增加一个限制条件，只能在切换到位完成的情况下才可以切换，否则在切换动画过程中不可以进行切换操作。先获取相应的文档节点，这里要清楚DOM对应的html结构，不然后面的逻辑处理会有点绕。图片大小根据自己的图片自行改动。
JQuery纯手搓轮播图【支持自动轮播、划动轮播、圆点联动】
Qing_0124的博客
04-24 1490
HTML: <!-- 轮播图 --> <div class="lunbo"> <!-- 轮播区域 --> <div class="lunbo_content"> <div class="imgContent"> <img draggable='false' class="imgItem activeImg Started" src="img/lunbo01.jpg"> <
如何使用js手搓轮播图效果
最新发布
不喜欢BUG，喜欢前端的日子
08-01 416
我这里使用的是原生js中animate方法和相关原生的鼠标事件（vue和react也是同理），同时还用到了阿里巴巴矢量图标库进行图标的下载，并制作鼠标点击切换轮播、自动轮播图等基本的轮播操作。
js手敲自动轮播图
m0_50441807的博客
04-27 241
轮播图的原理：ul标签设置一个position: relative;而li标签则设置position: absolute;，然后使用js来控制left的大小来实现定位，最后再添加一个transition属性实现一个过渡； 下面是html和css： <style> .box { width: 800px; height: 400px; margin: 10px auto; overflow: hidden; position: r
原生js实现轮播图的两种方法
我是一只蘑菇17的博客
12-22 2257
一.原生js实现幻灯片效果（直接跳转法） 1.分析需求： 幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。   那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。 首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所在的位置...
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
原生js代码轮播图.zip
03-16
本资源"原生js代码轮播图.zip"提供了一个使用纯JavaScript实现的轮播图示例，对于学习和理解原生JS编程技巧，特别是DOM操作和事件处理，是非常有价值的。 首先，我们要了解轮播图的基本结构和功能。一个基本的轮播...
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
JS实现轮播图（一看就懂逻辑清晰）
热门推荐
分享、进步、收获！！！
02-15 4万+
逻辑清晰的轮播图
原生JS实现轮播图的几种方式
莫邪莫急的博客
10-08 7437
三种原生JS轮播图实现思路
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
原生JS实现轮播图(3种方法)
HaiJun_Aion的博客
01-26 4万+
最近在巩固JS基础知识，顺手敲了个轮播图，它有3种换图方法。 自动换图 (设置定时器每隔2s换一张图) 点击左右箭头换图 点击小圆点换图 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
原生javascript实现轮播图
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-11 732
这是我的个人小站
原生js实现轮播图的两种方式
h395910638的博客
06-17 902
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
js手写轮播图思路与实现
qq_44129572的博客
04-06 3169
（轮播图动起来----最后一张与第一张无缝衔接）----鼠标移入暂停鼠标移出继续轮播-----上一张下一张按钮布局------点击切换上下一张-----拖拽切换上下一张等功能-------底部小圆点可明确表明当前显示第几张图片-----点击底部小圆点切换图片
DaZeng：JS原生轮播图（带原理、思考步骤、详情）
大曾blog
10-30 3377
首先说一下js原生轮播图的感悟吧 怎么说呢？做轮播图的时候路途太坎坷先是看各种博文领悟学习别人的代码，但感觉不是很完整条理也没有那么清晰，又去某站学习了一下函数封装轮播无缝等的视频才感觉没有那么难，零零碎碎时间加起来用了两天我才敢说我掌握了，但是都不能说吃透。但作为一个JS文档都没过过的人还是有点吃力，但是基础的还是知道的毕竟做过一些小damo，总的来说收获挺大。 另外上周才开始写的博客一周涨粉了...
原生js轮播图的实现
m0_72920117的博客
07-24 326
原理就是当点击到小圆点时，得到相应的i值，这个i值也就是span的index值，我们拿他和全局变量index作比较，然后重新设置wrap.style.left的值，然后把i值复制给全局变量index，最后显示当前的小原点即可。值得注意的是这里涉及到了闭包的概念，如果直接使用for循环，则不能得到正确的结果。很多网站都有轮播图，我这里为大家简答的介绍一下,如果有些的不对的地方请大家及时提出意见，也希望给大家带来帮助。小圆点部分是那个可以点击切换部分这个是根据图片来设置圆点的个数的不是自己想设置多少。...
JS实现轮播图
WYF857446152的博客
05-17 7099
用JS实现轮播图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值