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

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

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生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. 为KindEditor 添加“一键去除空格功能”

    环境说明:KindEditor  4.1.11 一.确定你在使用KindEditor时,引用的是kindEditor-all.js,找到任何一个已经存在的功能,例如,清除HTML代码,我在做的时候本来 ...

  2. 【js】箭头函数与普通函数的异同

    普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略ret ...

  3. bash 和sed 和gawk

    bash内建命令 命令描述 : 扩展参数列表,执行重定向操作 . 读取并执行指定文件中的命令(在当前shell环境中) alias 为指定命令定义一个别名 bg 将作业以后台模式运行 bind 将键盘 ...

  4. 自制操作系统Antz(15)——实现启动界面

    AntzScript

  5. poj 1321 棋盘问题 （DFS深度优先搜索）

    Problem Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋 ...

  6. unity 根据平板 或者 手机 确立横竖屏

    /* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...

  7. javascript prop和attr的区别

    在网上找了一些资料,通过自己去寻找,尝试,此次做一次总结. 1/  attr()是jQuery 1.0版本就有的函数,    prop()是jQuery 1.6版本新增的函数.毫无疑问,在1.6之前, ...

  8. 国内环境安装k8s

    环境准备 1. 配置/etc/hosts文件,将所有机器配置成通过主机名可以访问. 2. 如果环境中有代理,请一定要在环境变量中将no_proxy配置正确. 3.  master还需要执行下面的命令 ...

  9. Python中的反转字符串问题

    按单词反转字符串是一道很常见的面试题.在Python中实现起来非常简单. def reverse_string_by_word(s): lst = s.split() # split by blank ...

  10. h5 ios键盘卡死页面

    失去焦点以后重新设置页面顶部位置 $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('c ...