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 相关文章推荐
js获取对象为null的解决方法
Nov 21 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
vue实现移动端省市区选择
Sep 27 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学习教程之第1天
2008/06/15 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
图片自动更新(说明)
2006/10/02 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python正则表达式的使用
2017/06/12 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python 爬虫请求模块requests详解
2020/12/04 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
应届生如何写自荐信
2014/01/05 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
技术负责人岗位职责
2015/02/10 职场文书
客房领班岗位职责
2015/02/11 职场文书
行政上诉状范文
2015/05/23 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫