原生JS实现轮播图效果


Posted in Javascript onOctober 12, 2018

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了。

着是通过获取图片偏移量实现的,也实现了无缝切换,还有一点问题就是没有加上图片切换的时候的延迟了。

html:

<div id="container">
  <div id="list" style="left: -600px;">
   <img src="../image/1.jpg" alt="5">
   <img src="../image/1.jpg" alt="1">
   <img src="../image/2.jpg" alt="2">
   <img src="../image/3.jpg" alt="3">
   <img src="../image/4.jpg" alt="4">
   <img src="../image/5.jpg" alt="5">
   <img src="../image/1.jpg" alt="1">
  </div>
  <div id="buttons">
    <span class="on"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>
 </div>

js:

window.onload = function(){
 //获取元素
 var container = document.getElementById('container');
 var list = this.document.getElementById('list');
 var buttons = document.getElementById('buttons').getElementsByTagName('span');
 var prev = document.getElementById('prev');
 var next = document.getElementById('next');
 var index = 1;//默认第一个小圆点亮

 //小圆点的点亮
 function showButton() {
  //遍历小圆点的个数,当触发onclick事件后,className为‘on'的变为‘'。
  for(var i = 0;i < buttons.length; i++){
   if(buttons[i].className == 'on'){
    buttons[i].className = '';
    break;
   }
  }
  buttons[index - 1].className = 'on'; //原始第一个小圆点点亮,onclick事件触发后,index+1
 }

 function animate (offset) {
  //获取从第一张图片开始发生的偏移量
  var newLift = parseInt(list.style.left) + offset; 
  list.style.left = newLift + 'px';
  if(newLift > -600){ 
   //如果偏移量的位置大于-600的时候,图片跳转到第五张图片
   list.style.left = -3000 + 'px';
  }
  if(newLift < -3000){ 
   //如果偏移量的位置大于-3000的时候,图片跳转到第一张图片
   list.style.left = -600 + 'px';
  }
 }
 next.onclick = function () {
  //如果button的index为5的时候,再点击next按钮会返回 1;
  if(index == 5){
   index = 1;
  }else{
   index += 1;
  }
  showButton();
  animate(-600);
 }
 prev.onclick = function () {
  if(index == 1){
   index = 5;
  }else{
   index -= 1;
  }
  showButton();
  animate(600);
 }
}

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
8个必备的PHP功能实例代码
2013/10/27 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
python从PDF中提取数据的示例
2020/10/30 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
软件测试笔试题
2012/10/25 面试题
代办委托书怎么写
2014/08/01 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
勇敢的心观后感
2015/06/09 职场文书