原生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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
js仿微信抢红包功能
Sep 25 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
js自定义input文件上传样式
Oct 26 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Javascript的this用法
2017/01/16 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
pytorch简介
2020/11/11 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
中学家长会邀请函
2014/01/17 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
初二学生评语大全
2014/12/26 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python