原生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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
初学Python实用技巧两则
2014/08/29 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
应届生护士求职信
2013/11/01 职场文书
税务专业毕业生自荐信
2013/11/10 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
工作表扬信的范文
2014/01/10 职场文书
单位消防安全制度
2014/01/12 职场文书
陈欧的广告词
2014/03/18 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
小学生演讲稿大全
2014/04/25 职场文书
护理专业求职信
2014/06/15 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
先进工作者推荐材料
2014/12/23 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
合作意向书范本
2019/04/17 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS