原生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 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
laravel 数据验证规则详解
2019/10/23 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
javascript时间差插件分享
2016/07/18 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python实现FTP服务器服务的方法
2017/04/11 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python使用turtle绘制分形树
2018/06/22 Python
django query模块
2019/04/20 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
军训阅兵新闻稿
2015/07/17 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python