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

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

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生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: ;
            }

原生js手动轮播图的更多相关文章

  1. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  2. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  3. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  4. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  5. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  6. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  7. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  8. 原生JS实现旋转轮播图+文字内容切换

    废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...

  9. 原生JS的轮播图

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...

随机推荐

  1. NOIP 2017 宝藏 - 动态规划

    题目传送门 传送门 题目大意 (家喻户晓的题目不需要题目大意) 设$f_{d, s}$表示当前树的深度为$d$,与第一个打通的点连通的点集为$s$. 每次转移的时候不考虑实际的深度,深度都当做$d$, ...

  2. VS2110。VC++编译错误"error LNK2005: 已经在 XXX.obj 中定义的问题"

    有时候我们会在头文件当中定义一些全局变量或者全局函数,这种做法会比较方便,但有时候会出现“编译错误"error LNK2005: 已经在 XXX.obj 中定义的问题"的链接问题. ...

  3. redux&&createStore

    const createStore = (reducer,presetState, enhancer) => { if (typeof presetState === "functio ...

  4. vim中文乱码问题

    问题如下: 修改 /etc/vimrc 文件 添加: ,ucs-bom,gb18030,gbk,gb2312,cp936 把/etc/vimrc复制到你自己的根目录下面:复制为.vimrc(前面有个点 ...

  5. 从Scratch到Python——Python生成二维码

    # Python利用pyqrcode模块生成二维码 import pyqrcode import sys number = pyqrcode.create('从Scratch到Python--Pyth ...

  6. 使用sphinx制作接口文档并托管到readthedocs

    此sphinx可不是彼sphinx,此篇是指生成文档的工具,是python下最流行的文档生成工具,python官方文档即是它生成,官方网站是http://www.sphinx-doc.org,这里是一 ...

  7. Android虹软人脸识别sdk使用工具类

    public class FaceUtil { private static final String TAG = FaceUtil.class.getSimpleName(); private st ...

  8. 《SQL 基础教程》第五章:复杂查询

    这一章讲了关于创建视图.操作视图的知识. 视图:是不保存实际数据的,来自于表的,保存好的 SELECT 语句.使用视图有三个优点: 无需保存数据,因此节省储存设备的空间 视图可以命名,然后被保存.因而 ...

  9. extract method

    函数 简短,命名良好 函数名描述的是做什么 而不是怎么做 行数过高的代码中 将一大段做一个事的代码提取到独立的method 中 高层函数直接引用. 创建新函数 将提炼的代码平移到目标函数中 检查是否引 ...

  10. prometheus相关文章

    prometheus book https://yunlzheng.gitbook.io/prometheus-book/ 开发自己的分布式监控Prometheus Exporter时遇到的坑 htt ...