原生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: ;
}
Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 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
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP下escape解码函数的实现方法
2010/08/08 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JS继承 笔记
2011/07/13 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python全局变量用法实例分析
2016/07/19 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python多线程使用方法实例详解
2019/12/30 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python让函数不返回结果的方法
2020/06/22 Python
python如何写try语句
2020/07/14 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
高三历史教学反思
2014/01/09 职场文书
单位承诺书格式
2014/05/21 职场文书
数据保密承诺书
2014/06/03 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
售票员岗位职责
2015/02/15 职场文书