原生js轮播图
来源：互联网 发布：java向构造方法里传参 编辑：程序博客网 时间：2024/06/05 04:57
一、代码分两个部分：1、HTML部分，根据注释处理即可；2、play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。
二、轮播图原理说明：
（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，
（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；
（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推
（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意
（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="lib/css/iconfont.css"> <style>/*style标签及其内的内容，在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style></head><body><!--body标签里的内容，没说可以增减或更改的，不要增减或更改--><div id="box"> <div> <!--以下是可增减区域--> <a href="http://www.baidu.com" > <img id="img1" src="imgs/1_640x400.jpg" alt="" /> </a> <a href ="http://www.baidu.com"> <img id="img2" src="imgs/2_640x400.jpg" alt=""/> </a> <a href ="http://www.baidu.com"> <img src="imgs/3_640x400.jpg" alt="" /> </a> <!--以上是可增减区域--> </div></div></body></html><script> function Banner(width, height) {/*类*/ /*以下最外层div*/ var that = this; this.flag = true; this.width = width; this.height = height; this.oBox = document.getElementById("box"); this.oBox.style.width = width; this.oBox.style.height = height; this.oBox.style.margin = "0 auto"; this.oBox.style.overflow = "hidden"; this.oBox.style.position = "relative"; /*以下轮播区的div*/ this.oBoxInner = this.oBox.getElementsByTagName('div')[0]; this.oBoxInner.style.height = height; this.oBoxInner.style.position = "absolute"; this.oBoxInner.style.left = 0; this.oBoxInner.style.right = 0; this.aDiv = this.oBoxInner.getElementsByTagName('a');//单个轮播图\ this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/; this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度 for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/ this.aDiv[i].style.display = "block"; this.aDiv[i].style.width = width; this.aDiv[i].style.height = height; this.aDiv[i].style.float = "left"; this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0]; this.aDiv[i].aImg.style.width = "100%"; this.aDiv[i].aImg.style.height = "100%"; this.aDiv[i].aImg.style.cursor = "pointer"; } /*以下是焦点区部分（定位在轮播区的右下方）*/ var oUl = document.createElement('ul'); for (i = 0; i < this.aDiv.length - 1; i++) { oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>'; } this.oBox.appendChild(oUl); this.oUl = this.oBox.getElementsByTagName('ul')[0]; this.oUl.style.position = "absolute"; this.oUl.style.right = "10px"; this.oUl.style.bottom = "10px"; this.aLi = this.oUl.getElementsByTagName('li'); for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/ this.aLi[i].style.width = "18px"; this.aLi[i].style.height = "18px"; this.aLi[i].style.float = "left"; this.aLi[i].style.listStyle = "none"; this.aLi[i].style.background = "green"; this.aLi[i].style.borderRadius = "50%"; this.aLi[i].style.marginLeft = "10px"; this.aLi[i].style.cursor = "pointer"; this.aLi[i].index = i; this.aLi[i].onclick = function () { that.step = this.index; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}); that.bannerTip(); } } /*以下是向左向右两个箭头式按钮*/ for (i = 0; i < 2; i++) { var oA = document.createElement('span');// oA.href = "javascript:;" this.oBox.appendChild(oA); oA.innerHTML = "<i></i>"; } /*以下是左按钮（点击它，图片向左运动）*/ this.oBtnL = this.oBox.getElementsByTagName('span')[0]; this.oBtnI = this.oBtnL.getElementsByTagName('i')[0]; this.oBtnI.style.display='block'; this.oBtnI.style.backgroundImage = "url(imgs/left-arrow.svg)"; this.oBtnI.style.backgroundRepeat = "no-repeat"; this.oBtnI.style.width='40px'; this.oBtnI.style.height='40px'; this.oBtnL.style.position = "absolute"; this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnL.style.left = "30px"; this.oBtnL.style.borderLeft = "none"; this.oBtnL.style.borderBottom = "none"; this.oBtnL.style.opacity = "0.3"; this.oBtnL.style.filter = "alpha(opacity=30)"; this.oBtnL.style.display = "none"; this.oBtnL.style.cursor = "pointer";// 左按钮点击事件 this.oBtnL.onclick = function () { if (that.step <= 0) { that.step = that.aDiv.length - 1; that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width)); } that.step--; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)},500); that.bannerTip(); }; /*以下是右按钮（点击它，图片向右运动）*/ this.oBtnR = this.oBox.getElementsByTagName('span')[1]; this.oBtnI = this.oBtnR.getElementsByTagName('i')[0]; this.oBtnI.style.display='block'; this.oBtnI.style.backgroundImage = "url(imgs/right-arrow.svg)"; this.oBtnI.style.backgroundRepeat = "no-repeat"; this.oBtnI.style.width='40px'; this.oBtnI.style.height='40px'; this.oBtnR.style.position = "absolute"; this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnR.style.right = "30px"; this.oBtnR.style.borderLeft = "none"; this.oBtnR.style.borderBottom = "none"; this.oBtnR.style.opacity = "0.3"; this.oBtnR.style.filter = "alpha(opacity=30)"; this.oBtnR.style.display = "none";// 右按钮点击事件 this.oBtnR.onclick = function () { if (that.step >= that.aDiv.length - 1) { that.step = 0; that.css(that.oBoxInner, 'left', 0) } that.step++; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 500); that.bannerTip(); }; /*以下是其它*/ this.step = 0;//记录每次运动 this.timer = null;//定时器 this.init();//初始化轮播图 } Banner.prototype = {//类的原型 constructor: Banner, /*getCss：获取元素的属性值*/ getCss: function (curEle, attr) { var val = null; var reg = null; if (getComputedStyle) {//标准浏览器 val = getComputedStyle(curEle, false)[attr]; } else {//非标准浏览器 if (attr === 'opacity') { val = curEle.currentStyle.filter; //'alpha(opacity=10)' reg = /^alpha\(opacity[=:](\d+)\)$/i; return reg.test(val) ? reg.exec(val)[1] / 100 : 1; } val = curEle.currentStyle[attr]; } reg = /^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i; return reg.test(val) ? parseInt(val) : val; }, /*setCss：设置元素的属性值*/ setCss: function (curEle, attr, value) { if (attr === 'float') { curEle.style.cssFloat = value; curEle.style.styleFloat = value; return; } if (attr === 'opacity') { curEle.style.opacity = value; curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')'; return; } var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i; if (reg.test(attr)) { if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) { value = parseFloat(value) + 'px'; } } curEle.style[attr] = value; }, /*setGroupCss：设置元素的一组属性值*/ setGroupCss: function (curEle, options) { if (options.toString() !== '[object Object]') return; for (var attr in options) { this.setCss(curEle, attr, options[attr]); } }, /*css：getCss、setCss、setGroupCss的合写*/ css: function () { if (typeof arguments[1] === 'string') { if (typeof arguments[2] === 'undefined') { return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取； } else { this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置； } } if (arguments[1].toString() === '[object Object]') { this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值 } }, /*animate：轮播图动画函数*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ animate: function (curEle, target, duration) { /*1.定义动画的运行轨迹*/ function tmpEffect(t, b, c, d) { return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间 } /*2.为公式的每个参数做准备*/ var begin = {}; var change = {}; for (var attr in target) { begin[attr] = this.css(curEle, attr); change[attr] = target[attr] - begin[attr]; } duration = duration || 700; var time = 0; var that = this; var step = 10; /*初稿这里没有这个声明*/ /*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/ clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器 curEle.timer = setInterval(function () { time += step; /*4.定时器停止运动的条件（time>=duration）*/ if (time >= duration) { that.css(curEle, target); clearInterval(curEle.timer); return; } /*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/ for (var attr in target) { /*现在位置=开始位置+总距离/参数时间duration*time*/ var curPos = tmpEffect(time, begin[attr], change[attr], duration); that.css(curEle, attr, curPos); } }, step) }, /*初始化轮播图*/ init: function () { var that = this; /*1.开启自动轮播*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ this.timer = setInterval(function () { that.autoMove(); }, 2000); /*2.开启焦点，每个焦点与每张轮播图对应*/ this.bannerTip(); /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/ this.over_out(); }, autoMove: function () {// if (this.step >= this.aDiv.length - 1) {// this.step = 0;// this.css(this.oBoxInner, 'left', 0)// }// this.step++;// this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000);// this.bannerTip(); }, bannerTip: function () { var tmpStep = this.step >= this.aLi.length ? 0 : this.step; for (var i = 0; i < this.aLi.length; i++) { this.aLi[i].className = i === tmpStep ? 'on' : null; if (this.aLi[i].className === "on") { this.aLi[i].style.background = "red"; } else { this.aLi[i].style.background = "green"; } } }, over_out: function () { var that = this; that.oBox.onmouseover = function () { clearInterval(that.timer); that.oBtnL.style.display = 'block'; that.oBtnR.style.display = 'block'; }; that.oBox.onmouseout = function () { that.timer = setInterval(function () { that.autoMove() }, 2000); that.oBtnL.style.display = 'none'; that.oBtnR.style.display = 'none'; } } };</script><script> new Banner('500px', '250px'); /*这两个参数分别是轮播区的宽和高，可以根据需要更改*/</script>
阅读全文
0 0
- 原生JS实现轮播图
- 原生JS轮播图
- 原生js轮播图
- 原生js轮播图
- Js原生实现轮播图
- JS原生轮播图代码
- 原生js轮播图
- 原生js实现轮播图
- 原生js轮播图
- 原生JS轮播图
- 原生JS轮播图
- 原生JS实现轮播图
- JS原生轮播图实现
- 轮播图--原生js实现
- 原生JS设计轮播图
- 原生js轮播图
- 原生JS焦点轮播图实现
- 使用原生js制作轮播图
- 742. Closest Leaf in a Binary Tree的思路
- 【思路】挖掘密码找回漏洞常见的思路1
- databanding 替换 findviewbyid
- Java程序员的几条建议，你必须要看
- 关于机器学习中的损失函数。到底什么是损失函数。
- 原生js轮播图
- 欢迎注册和登陆我们的学海灯塔
- 【头条】处在这场新的工业革命的核心 渠道商如何捕获新商机？
- Jquery 点击图片在弹出层显示大图
- 字节、字、bit、byte的关系
- 骗子修成手册 正与反、黑与白 人性至贱
- 共用体
- jQuery+php实现ajax文件即时上传
- Lnmp1.4 一键安装包 安装php fileinfo扩展
