简易轮播图和无缝轮播图的实现
时间:2019-09-06
本文章向大家介绍简易轮播图和无缝轮播图的实现,主要包括简易轮播图和无缝轮播图的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在这里我们运用面向对象的方法来书写编程:
简易轮播图
首先
// OOA:分析:
// 轮播图:点击左右按钮切换图片
// 1.选择元素
// 2.绑定点击事件
// 3.计算索引
// 4.根据索引,显示图片
// OOD:设计
// function Banner(){
// // 1.选择元素
// // 2.绑定点击事件
// this.init()
// }
// Banner.prototype.init = function(){
// // 绑定事件...
// // 3.计算索引
// this.changeIndex()
// }
// Banner.prototype.changeIndex = function(){
// // 计算索引
// // 4.根据索引,显示图片
// this.display()
// }
// Banner.prototype.display = function(){
// // 显示图片
// }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;} /* .imgbox{} */ .imgbox img{width: 1000px;height:300px;position: absolute;left:0;top:0;overflow: hidden} .imgbox img:nth-child(1){z-index: 1} /* .imgbox a img{width: 1000px;height: 300px} */ .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);z-index: 9999999;} #left{left:0} #right{right:0} </style> </head> <body> <div class="banner"> <div class="imgbox"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> function Banner(){ // 1.选择元素 this.imgs = document.querySelector(".imgbox").children; this.left = document.querySelector("#left"); this.right = document.querySelector("#right"); // 自定义的默认显示的图片:索引 this.index = 0; // 为了显示图片设置的层级 this.i = 2; // 2.绑定点击事件 this.init() } Banner.prototype.init = function(){ var that = this; // 绑定事件... this.right.onclick = function(){ // 3.计算索引 that.changeIndex(); } } Banner.prototype.changeIndex = function(){ // 计算索引 if(this.index === this.imgs.length-1){ this.index = 0; }else{ this.index++; } // 4.根据索引,显示图片 this.display() } Banner.prototype.display = function(){ // 显示图片 this.imgs[this.index].style.zIndex = this.i++; // this.imgs[this.index].style.width = 0; // move(this.imgs[this.index],{ // width:1000 // }) this.imgs[this.index].style.width = 0; this.imgs[this.index].style.height = 0; move(this.imgs[this.index],{ width:1000, height:300 }) // this.imgs[this.index].style.left = "-1000px"; // move(this.imgs[this.index],{ // left:0, // }) // this.imgs[this.index].style.width = "0"; // this.imgs[this.index].style.height = "0"; // move(this.imgs[this.index],{ // width:1000, // height:150 // },function(){ // move(this.imgs[this.index],{height:300}) // }.bind(this)) } new Banner(); </script> </html>
在这里我们提前封装了“move”JS文件,来实现轮播图的运动(如下):
function move(ele,json,callback){ clearInterval(ele.t); ele.t = setInterval(() => { var onoff = true; for(var i in json){ var iNow = parseInt(getStyle(ele,i)); var speed = (json[i] - iNow)/6; speed = speed<0 ? Math.floor(speed) : Math.ceil(speed); if(iNow != json[i]){ onoff = false; } ele.style[i] = iNow + speed + "px"; } if(onoff){ clearInterval(ele.t); callback && callback(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
接着我们再实现无缝轮播图:
方法一:(这个方法运用的是将轮播图假设成一个像跑马灯一样的性质,不断的衔接的那种方式来实现轮播图效果;这个方法虽然实现了轮播图的效果,但是还是有一个小缺点,那就是当如果在轮播图的下方实现点击按钮到达对应图片的功能的时候,比如在图片1,你点击第5个按钮的话,虽然会跳转,但是中间的二三四图片也会相对的一闪而过,就会影响用户体验)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;} .imgbox{position: absolute;left:0;} .imgbox img{width: 1000px;height:300px;float:left;} .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);} #left{left:0} #right{right:0} </style> </head> <body> <div class="banner"> <div class="imgbox"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <!-- W1.复制第一张图片在最后,做过渡用 --> <img src="img/1.jpg" alt=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> // OOA: // OOD: // OOP: function Banner(){ this.left = document.getElementById("left") this.right = document.getElementById("right") this.imgbox = document.querySelector(".imgbox") this.img = this.imgbox.children; this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px"; this.index = 0; this.init() } Banner.prototype.init = function(){ var that = this; // this.left.onclick = function(){} this.right.onclick = function(){ that.changeIndex() } } Banner.prototype.changeIndex = function(){ if(this.index == this.img.length-1){ // W2.当索引到最后一个时,回到真正的第二张图片,索引为1 this.index = 1; // W3.索引设置好之后,将imgbox的left设置成初始值left:0 // move会从left:0走到-index1*width1000 this.imgbox.style.left = 0; }else{ this.index++ } this.display(); } Banner.prototype.display = function(){ move(this.imgbox,{ left:-this.index * this.img[0].offsetWidth }) } new Banner(); </script> </html>
所以为了解决上面遇到的那个瑕疵,我们就可以使用方法二:(在这个无缝轮播图中就完美的实现了无缝轮播,我们使用的原理是,就比如将图片都放置在将要显示的可视区域的左右,当我们需要哪一张出来的时候,就将它抽出来,就不会出现方法一那样的BUG,在方法二中,要注意左右按钮分别的控制,比当我点击左边按钮,那么要进来的假设是第三张图片,那么被抽离的当前图片就应该是第四张图片;而当我点击右键的按钮,假设要进来的是第二张图片,那么要被抽离的图片就是图便一)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;} .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;} .imgbox img:nth-child(1){left:0;} .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);} #left{left:0} #right{right:0} </style> </head> <body> <div class="banner"> <div class="imgbox"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> </div> </body> <script src="../move.js"></script> <script> function Banner(){ this.left = document.getElementById("left") this.right = document.getElementById("right") this.imgbox = document.querySelector(".imgbox") this.img = this.imgbox.children; this.index = 0; // W1.设置要走的索引 this.iPrev = this.img.length - 1; this.init() } Banner.prototype.init = function(){ var that = this; // this.left.onclick = function(){} this.right.onclick = function(){ that.changeIndex() } } Banner.prototype.changeIndex = function(){ if(this.index == this.img.length-1){ this.index = 0; // W2.当要进来的是第0张时,走的是最后一张 this.iPrev = this.img.length-1 }else{ this.index++; // W3.正常情况下,走的都是进来的上一张,上一张为当前-1 this.iPrev = this.index-1; } this.display(); } Banner.prototype.display = function(){ // W4.根据要走的和要进来的索引 // 先设置初始位置,然后再开始走(move) // 要走的:this.img[this.iPrev] this.img[this.iPrev].style.left = 0; move(this.img[this.iPrev],{left:-this.img[0].offsetWidth}) // 要进来的:this.img[this.index] this.img[this.index].style.left = this.img[0].offsetWidth + "px"; move(this.img[this.index],{left:0}) } new Banner(); </script> </html>
方然在这几种轮播图的方法中,要十分清楚的计算出来,你当前这个图片所在的索引以及应该增加或扣除的长度。以及在move的玩法,有许多中,可以有各种的图片加载的方式,还是十分有趣的。
原文地址:https://www.cnblogs.com/zhuangch/p/11477974.html
- java: web应用中不经意的内存泄露
- java: web应用中不经意的内存泄露
- velocity模板引擎学习(4)-在standalone的java application中使用velocity及velocity-tools
- mac上开启ftp
- Web前端开发的四个阶段
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
- 关于把本地应用封装成windows app发布审核通不过的问题
- java并发编程学习:用 Semaphore (信号量)控制并发资源
- java并发编程学习: ThreadLocal使用及原理
- 使用Autofac IOC组织多项目应用程序
- 国内首个“人工智能与变革管理研究院”成立
- 解决WordPress缩略图插件timthumb不支持站外图片的问题
- 让 http 2来得更猛烈些吧
- SQL Server 2008基于策略的管理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「Mysql索引原理(五)」多列索引
- 「Mysql索引原理(六)」聚簇索引
- 「Mysql索引原理(七)」覆盖索引
- 「Mysql索引原理(八)」使用索引扫描做排序
- 「Mysql索引原理(九)」前缀压缩索引
- 「Mysql索引原理(十)」冗余和重复索引
- 「Mysql索引原理(十一)」索引和锁
- 「Mysql索引原理(十二)」索引案例1-支持多种过滤条件
- 「Mysql索引原理(十三)」索引案例2-避免多个范围条件
- 「Mysql索引原理(十四)」索引案例3-优化排序
- 字符仿真
- 「Mysql索引原理(十五)」维护索引和表-修复损坏的表
- 「Mysql索引原理(十六)」维护索引和表-更新索引统计信息
- 「Mysql索引原理(十七)」维护索引和表-减少索引和数据的碎片
- 「通信框架Netty4 源码解读(一)」起步,关于IO的简单总结,模拟一个redis客户端