首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现手动轮播图效果实例代码

Posted in Javascript onNovember 22, 2018

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

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

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

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

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

<link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />//本博客有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" rel="external nofollow" rel="external nofollow" />
 <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>

效果图：

原生JS实现手动轮播图效果实例代码

原生JS实现手动轮播图效果实例代码

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实现手动轮播图效果实例代码

- Author -

静遇。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Add a Formatted Table to a Word Document
Jun 15 Javascript
javascript void(0)的妙用
Oct 21 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 #Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
微信上传视频文件提示（推荐）
Nov 22 #Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 #Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 #Javascript
详解Vue组件之作用域插槽
Nov 22 #Javascript
详解vue中localStorage的使用方法
Nov 22 #Javascript
字符集(1) variable_scope(1) data(4) character(1) Keras(3) 三子棋(2) 数据表(1) name_scope (1) 神经网络(7) mysql(6)
You might like
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
初识Node.js
2014/09/03 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
又一款MVVM组件 构建自己的Vue组件（2）
2017/03/13 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
全面分析JavaScript 继承
2019/05/30 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
python中文乱码的解决方法
2013/11/04 Python
Cpy和Python的效率对比
2015/03/20 Python
Python实现批量下载文件
2015/05/17 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python iter()函数用法实例分析
2018/03/17 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python同步windows和linux文件
2019/08/29 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
商务会议邀请函
2014/01/09 职场文书
毕业证丢失证明
2014/01/15 职场文书
新书吧创业计划书
2014/01/31 职场文书
辞职信怎么写
2015/02/27 职场文书
读《方与圆》有感：交友方圆有度
2020/01/14 职场文书