原生js手动轮播图
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。
轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。
手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生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手动轮播图的更多相关文章
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生JS实现旋转轮播图+文字内容切换
废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...
- 原生JS的轮播图
学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...
随机推荐
- Holer服务端软件使用
用户可以下载 holer-server.zip 搭建自己的Holer服务端. 1. 搭建Holer服务端准备工作 (1) 准备一台Linux系统或者Windows系统主机: (2) 安装Java 1. ...
- struts2+springmvc+hibernate开发。个人纪录
对于很多新手来说,都不太清楚应该怎么去放置代码并让他成为一种习惯.个人的总结如下: 一.基础包类的功能 1.dao :提供底层接口 2.daoimpl:实现底层接口类,与底层交互 3.entity:实 ...
- 各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
- 劳德巴赫下载kernel和文件系统时问题
用劳德巴赫下载 kernel dtb rootfs BOOT.bin 报错(记了个大概) Bad CRC Ramdisk image is corrupt or invalid 记得之前有人和我说r ...
- Linux学习方法和心态
如果单纯是为了架站,那我就可以毕业了. 成就感+兴趣=学习的动力. 不同的环境下,解决问题的办法有很多种,只要行得通,都是好方法. Distribution 安装 熟悉Shell环境 Shell脚本 ...
- 用Python绘制一个感兴趣是数学公式图
下面是函数sin,cos函数的图像: 代码如下: import numpy as np import pylab as pl import matplotlib.font_manager as fm ...
- bzoj 3597 [Scoi2014] 方伯伯运椰子 - 费用流 - 二分答案
题目传送门 传送门 题目大意 给定一个费用流,每条边有一个初始流量$c_i$和单位流量费用$d_i$,增加一条边的1单位的流量需要花费$b_i$的代价而减少一条边的1单位的流量需要花费$a_i$的代价 ...
- Oracle中connect by用法示例
在工作中常常会遇到一些数据表包含父子关系的数据,比如行业.地区等等,如果需要将其节点按父子关系一步一步列出来,就需要使用connect by了. 如有由自身行业代码basecode和父行业代码pare ...
- SpringMVC，SpringBoot使用ajax传递对象集合/数组到后台
假设有一个bean名叫TestPOJO. 1.使用ajax从前台传递一个对象数组/集合到后台. 前台ajax写法: var testPOJO=new Array(); //这里组装testPOJO数组 ...
- 什么时候使用“RCC_APBXPeriph_AFIO”
什么时候需要开启复用时钟: (1)使用EXTI (2)重映射(用到外设的重映射功能时才需要使能AFIO的时钟) 举例:重映射USART2 USART2的TX/RX在PA.2/3.但是,PA.2已经被T ...