原生JS实现的简单轮播图功能【适合新手】


Posted in Javascript onAugust 17, 2018

本文实例讲述了原生JS实现的简单轮播图功能。分享给大家供大家参考,具体如下:

经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成。话不多说,上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3water.com JS轮播图</title>
<script src="jquery.js"></script>
<style>
*{
margin: 0px;
padding:0px;
list-style: none;
text-decoration: none;
}
#flash{ /*根据图片的大小来设置外层div的大小*/
width: 520px;
height: 280px;
margin: 0 auto;
position: relative; /*设置div定位,方便之后图片及圆点位置的设定*/
border:1px solid black;
}
#flash img{
width: 100%;
height: 100%;
position: absolute; /*设置所有图片重叠*/
left: 0px;
top: 0px;
display: none; /*设置所有图片隐藏,通过改变第一个图片的行间样式来使第一个图片显示*/
}
#flash ul{
width: 150px;
height: 25px;
border-radius: 20px;
background-color:rgba(255,255,255,0.5);
position: absolute;
left: 35%;
bottom: 10%;
}
#flash ul li{
width: 12px;
height: 12px;
margin-top:5px;
background-color: #fff;
border-radius: 50%;
margin-left: 15px;
float: left;
}
#flash ul .li_1{
background-color: #f40; /*设置第一个圆点背景色为红色*/
}
#flash .span-r{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
right: 2%;
top: 45%;
background-color: rgba(255,255,255,0.5);
}
#flash .span-r span{
width: 100%;
height:100%;
color:rgba(0,0,0,0.5);
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
cursor: pointer;
}
#flash .span-l{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 2%;
top: 45%;
background-color: rgba(255,255,255,0.5);
}
#flash .span-l span{
width: 100%;
height:100%;
color:rgba(0,0,0,0.5);
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
cursor: pointer;
}
</style>
</head>
<div id="flash">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt="" style="display: block">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt="">
<img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt="">
<ul>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="span-r">
<span>></span>
</div>
<div class="span-l">
<span><</span>
</div>
</div>
<body>
<script>
var div = document.getElementById('flash');
var img = div.getElementsByTagName('img'); /*选中div下所有的图片*/
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
var div_r = document.getElementsByTagName('div')[1];
// var span_r = div_r.getElementsByTagName('span');
var div_l = document.getElementsByTagName('div')[2];
// var sapn_l = div_l.getElementsByTagName('span');
var len = img.length;
var count = 0; /*设置count来显示当前图片的序号*/
function run(){ /*将定时器里的函数提取到外部*/
count++;
count = count==5?0:count; /*当图片加载到最后一张时,使其归零*/
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/
}
img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundColor = "#fff"; /*原理同上*/
}
li[count].style.backgroundColor = "#f40";
}
var timer = setInterval(run,1000); /*定义定时器,使图片每隔1s更换一次*/
div.onmouseover = function(){
clearInterval(timer);
}
div.onmouseleave = function(){ /*定义鼠标移出事件,当鼠标移出div区域,轮播继续*/
timer = setInterval(run,1000);
}
for(var i=0;i<len;i++){
li[i].index = i; /*定义index记录当前鼠标在li的位置*/
li[i].onmouseenter = function(){ /*定义鼠标经过事件*/
for(var i=0;i<len;i++){ /*通过for循环将所有图片隐藏,圆点背景设为白色*/
li[i].style.background = '#fff';
img[i].style.display = 'none';
}
this.style.background = '#f40'; /*设置当前所指圆点的背景色*/
img[this.index].style.display = 'block'; /*使圆点对应的图片显示*/
}
}
div_r.onclick = function(){ /*因为span没有设置宽高,直接把事件添加到他的父级*/
run(); /*直接调用现成的run函数*/
}
function reverse(){
count--;
count = count==-1?4:count;
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/
}
img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundColor = "#fff"; /*原理同上*/
}
li[count].style.backgroundColor = "#f40";
}
div_l.onclick = function(){
reverse(); /*重新设置函数*/
}
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行效果如下:

原生JS实现的简单轮播图功能【适合新手】

感兴趣的朋友可以自己动手测试一下。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 #Javascript
LayerClose弹窗关闭刷新方法
Aug 17 #Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 #Javascript
layui前端框架之table表数据的刷新方法
Aug 17 #Javascript
Vue登录注册并保持登录状态的方法
Aug 17 #Javascript
小程序清理本地缓存的方法
Aug 17 #Javascript
layui table设置前台过滤转义等方法
Aug 17 #Javascript
You might like
PHP获取当前完整URL地址的函数
2014/12/21 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php实现可运算的验证码
2015/11/10 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
React Router基础使用
2017/01/17 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python pandas常用函数详解
2018/02/07 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
华为的Java面试题
2014/03/07 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
办护照工作证明范本
2014/01/14 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
个人维稳承诺书
2015/05/04 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python