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判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
VUE项目初建和常见问题总结
Sep 12 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
JS字符串补全方法padStart()和padEnd()
May 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连mysql和oracle数据库性能比较
2006/10/09 PHP
php过滤敏感词的示例
2014/03/31 PHP
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python中函数传参详解
2016/07/03 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
keras中的History对象用法
2020/06/19 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
大学生创业项目方案
2014/03/08 职场文书
动员大会主持词
2014/03/20 职场文书
大学生演讲稿
2014/04/25 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年公司工作总结
2015/04/25 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB