简易轮播图
Posted hy96
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易轮播图相关的知识，希望对你有一定的参考价值。
<!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> .bannerwidth:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden; /* .imgbox */ .imgbox imgwidth: 1000px;height:300px;position: absolute;left:0;top:0;overflow: hidden .imgbox img:nth-child(1)z-index: 1 /* .imgbox a imgwidth: 1000px;height: 300px */ .btns inputposition: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);z-index: 9999999; #leftleft:0 #rightright:0 </style> </head> <body> <div class="banner"> <div class="imgbox"> <img src="img/1.jpg" > <img src="img/2.jpg" > <img src="img/3.jpg" > <img src="img/4.jpg" > <img src="img/5.jpg" > </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(); this.left.onclick=function () that.changeIndex2();//为什么不用this？因为这里的this绑定的是点击的元素,如果用this指的是实例 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"; 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)) Banner.prototype.changeIndex2=function () if(this.index==0) this.index=this.imgs.length-1 else this.index--;//点击的时候索引就加1 this.display2() ; Banner.prototype.display2=function () this.imgs[this.index].style.zIndex=this.i++; this.imgs[this.index].style.left = "2000px"; move(this.imgs[this.index], left:0 ); new Banner(); 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]; </script> </html>
以上是关于简易轮播图的主要内容，如果未能解决你的问题，请参考以下文章