原生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 连续列表实现代码
Dec 21 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python中黄金分割法实现方法
2015/05/06 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python实现简单图书管理系统
2019/11/22 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
创先争优活动心得体会
2014/09/04 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
团代会邀请函
2015/02/02 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python