原生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 相关文章推荐
js 编写规范
Mar 03 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
浅谈JavaScript字符集
May 22 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
浅谈关于axios和session的一些事
Jul 13 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
vue实现五子棋游戏
May 28 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 一个比较完善的简单文件上传
2010/03/25 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
菊花转动的jquery加载动画效果
2018/08/19 jQuery
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
js+html实现周岁年龄计算器
2019/06/25 Javascript
Python计算已经过去多少个周末的方法
2015/07/25 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
门卫班长岗位职责
2013/12/15 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
代理协议书范本
2014/04/22 职场文书
车贷收入证明范本
2014/09/14 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
教师节领导致辞
2015/07/29 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技