原生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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
JS实现li标签的删除
Apr 12 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
php的access操作类
2008/04/09 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
Python找出list中最常出现元素的方法
2016/06/14 Python
python实现杨辉三角思路
2017/07/14 Python
python模拟事件触发机制详解
2018/01/19 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
英文求职信结束语大全
2013/10/26 职场文书
总务岗位职责
2013/11/19 职场文书
教师自我鉴定
2013/12/13 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
处级干部考察材料
2014/12/24 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python