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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
小程序实现按下录音松开识别语音
Nov 22 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动态生成JavaScript代码
2009/03/09 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP文件上传类实例详解
2016/04/08 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
JS实现self的resend
2010/07/22 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python logging模块的使用详解
2020/10/23 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
自荐信的禁忌和要点
2013/10/15 职场文书
医院门卫岗位职责
2013/12/30 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
社会工作专业求职信
2014/07/15 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang