原生JS实现的自动轮播图功能详解


Posted in Javascript onDecember 28, 2018

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

轮播图的用处

轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等。有些自动选项卡也是需要用到的,而且它的可重复性高。在这里分享一下,用js原生代码,实现轮播图的常见效果!

轮播图的原理

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过定时器实现自动播放。

 原生JS实现的自动轮播图功能详解

Html布局

首先父容器banner存放所有内容,子容器img-list存放图片。子容器list存放按钮小圆点。圆点我使用了背景图片的方式!

<div id="banner">
  <ul id="img-list">
    <li><img src="images/banner1.png" alt="1"/></li>
    <li><img src="images/banner2.jpg" alt="2"/></li>
    <li><img src="images/banner3.png" alt="3"/></li>
  </ul>
  <div id="list">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
  </div>
</div>

css修饰

1、对盒子模型,文档流的理解,绝对定位问题。

2、图片有固定的的宽高,先在img-list中设置三张图片总共的宽,多余的将overflow: hidden;进行隐藏!载将其图片下的li设置往右浮动。

3、将list span中的宽高固定,给个背景图片。第一张图片上设个默认的黄色圆点图片。

#banner {
  width:100%;
  padding:0;
  clear: both;
  position: relative;
  height: 400px;
  z-index:1;
}
#img-list {
  display: block;
  width:5760px;
  height: 400px;
  overflow: hidden;
  z-index:1;
  position: relative;
}
#img-list li{
  float: left;
  width:100%;
  height: 400px;
  overflow: hidden;
  /* position: absolute;
  top:0;
  left:0; */
  z-index: 2;
}
#list {
  width:100%;
  height:18px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  z-index: 100;
}
#list > span {
  width:18px;
  height: 18px;
  overflow: hidden;
  display: inline-block;
  margin:0 2px;
  background: url(../images/yuan.png);
  cursor: pointer;
}
#list .on {
  background: url(../images/huanyu.png);
}

JS效果

1、首先我们先设置自动播放的函数

2、然后鼠标滑过容器时停止播放,鼠标离开整个容器时继续播放至下一张。

3、再定义并调用自动播放函数

var banner=document.getElementById('banner');
var imglist=document.getElementById('img-list').getElementsByTagName("li");
var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
var timer=null;
//设置自动播放函数
function autoPlay () {
   if (++index >= imglist.length) {index = 0};
   changeImg(index);
}
// 鼠标划过整个容器时停止自动播放
banner.onmouseover = function () {
   clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
banner.onmouseout=function(){
   timer=setInterval(autoPlay,2000);
}
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
接着定义图片的切换函数
// 定义图片切换函数
function changeImg (curIndex) {
   for (var i = 0; i < imglist.length; i++) {
     imglist[i].style.display = "none";
     list[i].className = "";
   }
   imglist[curIndex].style.display = "block";
   list[curIndex].className = "on";
}

最后遍历所有数字导航实现划过切换至对应的图片,需获得它的索引值

for (var i = 0; i < list.length; i++) {
 list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
};

到此为止,我们的轮播所有代码完成!

还不算完美,继续努力!

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

Javascript 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
详解puppeteer使用代理
Dec 27 #Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 #Javascript
详解angular2 控制视图的封装模式
Dec 27 #Javascript
JavaScript原型对象原理与应用分析
Dec 27 #Javascript
You might like
PHP中用hash实现的数组
2011/07/17 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
python+requests接口自动化框架的实现
2020/08/31 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
小学节能减排倡议书
2014/05/15 职场文书
自主招生自荐信格式
2015/03/04 职场文书
初婚未育证明样本
2015/06/18 职场文书
停车场管理制度范本
2015/08/05 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL