JavaScript实现原型封装轮播图


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了JavaScript实现原型封装轮播图的具体代码,供大家参考,具体内容如下

只要用dom元素调用这个方法,传一个数组进去,里面放的是图片的路径。

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
  padding: 0px;
  margin: 0px;
  list-style: none;
 }

 .leftBtn {
  position: absolute;
  width: 30px;
  height: 30px;
  color: black;
  background-color: cyan;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  text-align: center;
  opacity: 0.6;
  cursor: pointer;
  left: 10px;
 }

 .rightBtn {
  position: absolute;
  width: 30px;
  height: 30px;
  color: black;
  background-color: cyan;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  text-align: center;
  opacity: 0.6;
  cursor: pointer;
  right: 10px;
 }

 .slider {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  cursor: pointer;
 }

 .slider span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: darkgray;
  border-radius: 50%;
  margin-left: 10px;
 }

 .slider .active {
  background-color: #f40;
 }
 </style>
</head>

<body>
 <div class="div"></div>
 <div id="div"></div>
 <script>

 var div = document.getElementsByClassName('div')[0]
 var oDiv = document.getElementById('div')
 // var arr = ['./tp copy/decade.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg']
 HTMLDivElement.prototype.createTurnPage = function (arr) {
  var arr = (typeof arr != "object") ? [arr] : arr; //确保参数总是数组
  var ul = document.createElement('ul');
  ul.className = 'ul'
  this.style.width = '400px';
  this.style.height = 200 + 'px';
  this.style.position = 'relative';
  this.style.overflow = 'hidden'
  this.style.margin = '200px auto 0px';
  this.appendChild(ul);
  ul.style.width = (1 + arr.length) * parseInt(this.style.width) + 'px'
  ul.style.height = this.style.height
  ul.style.position = 'absolute'
  for (let i = 0; i < arr.length + 1; i++) {
  var li = document.createElement('li');
  var img = document.createElement('img');
  ul.appendChild(li);
  li.appendChild(img);
  li.style.width = this.style.width
  li.style.height = this.style.height
  li.style.float = 'left'
  img.style.width = '100%'
  img.style.height = '100%'
  img.src = arr[i];
  }
  var LastImg = document.createElement('img');
  var liList = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
  LastImg.src = arr[0];
  LastImg.style.width = '100%'
  LastImg.style.height = '100%'
  liList[liList.length - 1].removeChild(img)
  liList[liList.length - 1].appendChild(LastImg);

  var leftBtn = document.createElement('div');
  var rightBtn = document.createElement('div');
  var slider = document.createElement('div');
  for (let i = 0; i < arr.length; i++) {
  var span = document.createElement('span')
  slider.appendChild(span)
  }
  var arrSpan = slider.getElementsByTagName('span')
  this.appendChild(leftBtn)
  this.appendChild(rightBtn)
  this.appendChild(slider)
  slider.className = 'slider'
  leftBtn.className = 'leftBtn';
  leftBtn.innerHTML = '<'
  rightBtn.className = 'rightBtn';
  rightBtn.innerHTML = '>'

  var timer = null;
  var lock = true
  var index = 0;
  var moveWidth = document.getElementsByTagName('li')[0].offsetWidth;
  var num = document.getElementsByTagName('li').length - 1;


  leftBtn.onclick = function () {
  autoMove('right->left')
  }
  rightBtn.onclick = function () {
  autoMove('left->right')
  }
  for (var i = 0; i < arrSpan.length; i++) {
  (function (myindex) {
   arrSpan[myindex].onclick = function () {
   lock = false;
   clearTimeout(timer)
   index = myindex
   startMove(ul, { left: -index * moveWidth }, function () {
    lock = true;
    timer = setTimeout(autoMove, 2000)
    spanMove(index)
   })

   }
  }(i))
  }
  function autoMove(direction) {
  if (lock) {
   lock = false
   clearTimeout(timer);
   if (!direction || direction == 'left->right') {
   index++;
   startMove(ul, { left: ul.offsetLeft - moveWidth }, function () {
    if (ul.offsetLeft == - num * moveWidth) {
    ul.style.left = 0 + 'px'
    index = 0
    }
    spanMove(index);
    timer = setTimeout(autoMove, 2000)
    lock = true
   })
   } else if (direction == 'right->left') {
   if (ul.offsetLeft == 0) {
    ul.style.left = - num * moveWidth + 'px'
    index = num
   }
   index--;
   startMove(ul, { left: ul.offsetLeft + moveWidth }, function () {
    timer = setTimeout(autoMove, 2000)
    lock = true
    spanMove(index)
   })

   }
  }

  }
  function spanMove(index) {
  for (var i = 0; i < arrSpan.length; i++) {
   arrSpan[i].className = ''
  }
  arrSpan[index].className = 'active'
  }
  timer = setTimeout(autoMove, 1500)
 }

 // div.createTurnPage(arr)
 oDiv.createTurnPage(['./tp copy/decade.jpg', './tp copy/logo.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg'])


 function getStyle(dom, attr) {
  if (window.getComputedStyle) {
  return window.getComputedStyle(dom, null)[attr];
  } else {
  dom.currentScript[attr];
  }
 }



 function startMove(dom, attrObj, callback) {
  clearInterval(dom.timer);
  var speed = null,
  cur = null;

  dom.timer = setInterval(function () {
  var stop = true;
  for (var attr in attrObj) {
   if (attr == "opacity") {
   cur = parseFloat(getStyle(dom, attr)) * 100;
   } else {
   cur = parseInt(getStyle(dom, attr));
   }
   speed = (attrObj[attr] - cur) / 7;
   speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
   if (attr == "opacity") {
   dom.style.opacity = (speed + cur) / 100;
   } else {
   dom.style[attr] = speed + cur + "px";
   }
   if (cur != attrObj[attr]) {
   stop = false;
   }
  }
  if (stop) {
   clearInterval(dom.timer);
   typeof callback == "function" && callback();
  }
  }, 20);
 }

 </script>
</body>

</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
详解JavaScript中的坐标和距离
May 27 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
JS如何生成动态列表
Sep 22 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
JavaScript代码实现简单计算器
Dec 27 #Javascript
JavaScript实现雪花飘落效果
Dec 27 #Javascript
微信小程序自定义胶囊样式
Dec 27 #Javascript
JS实现鼠标移动拖尾
Dec 27 #Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
You might like
聊天室php&amp;mysql(二)
2006/10/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
民主生活会批评与自我批评总结
2014/10/17 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
公司离职证明标准格式
2014/11/18 职场文书
酒店辞职书范文
2015/02/26 职场文书
论文答辩开场白大全
2015/05/27 职场文书
人生遥控器观后感
2015/06/11 职场文书
九年级化学教学反思
2016/02/22 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python