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

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

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生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. 5.list集合添加姓名{张三,李四,王五,二丫,钱六,孙七},将二丫替换为王小丫, 写入到"D:\\stuinfo.txt"

    package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...

  2. Java8分组(groupingBy)

    1.分组,计数,排序 public class Java8Example1 { public static void main(String[] args) { List<String> ...

  3. linux 安装软件三种方法

    引言 在ubuntu当中,安装应用程序我所知道的有三种方法,分别是apt-get,dpkg安装deb和make install安装源码包三种.下面针对每一种方法各举例来说明. apt-get方法 使用 ...

  4. MySQL中show profiles的开启

    Query Profiler是MYSQL自带的一种query诊断分析工具,通过它可以分析出一条SQL语句的性能瓶颈在什么地方.通常我们是使用的explain,以及slow query log都无法做到 ...

  5. java窗体

    听完老师所讲的窗体,然后自己就去尝试写代码,结果是窗体出现了,但是就是不能关闭,求解!! package Swing.src.swring; import java.awt.Color;import ...

  6. Java中日期格式（String、Date、Calendar）的相互转换

    package day20190318; import java.text.ParseException; import java.text.SimpleDateFormat; import java ...

  7. Bugku-CTF之flag.php（点了login咋没反应）

    Day20 flag.php 地址:http://123.206.87.240:8002/flagphp/   点了login咋没反应 提示:hint 

  8. 2018年山东省省队集训 Round 1 Day 2简要题解

    从这里开始 Problem A 生日礼物 Problem B 咕咕 Problem C 解决npc (相信来看这篇博客的人都有题面) T2以为可以线性递推,然后花了两个小时.然后想了两个小时T1,会了 ...

  9. Oracle基础知识点——Oracle服务端和客户端

    Oracle服务端 服务端提供oracle服务的实例,其是数据库的核心,用于数据库的管理,对象的管理与存储.数据的存储.查询.数据库资源的监控.监听等一些服务. 例子:比如一台机子上安装了Oracle ...

  10. VBoxManage

    虚拟机名称 centos6.9-1 centos6.9-2 centos6.9-3 使用命令开机 虚拟机 VBoxManage startvm 'centos6.9-1' 正常启动 VBoxManag ...