原生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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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设计模式之结构模式的深入解析
2013/06/13 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
python中的yield使用方法
2014/02/11 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python3.5绘制随机漫步图
2018/08/27 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
深入浅析Python中的迭代器
2019/06/04 Python
如何基于Python批量下载音乐
2019/11/11 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python与idea的集成的实现
2020/11/20 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
党员个人党性分析材料
2014/12/18 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
公司管理建议书
2015/09/14 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers