使用js实现轮播图效果的几种方法

使用js实现轮播图效果的几种方法

我们在各种网页中经常见到轮播图的效果，接下来我们用几种不同的方法来实现这个效果，当然方法不同所实现的效果也有所差异；

先封装一个move函数用来实现图片的移动：

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.简易版：
布局就是在一个大框内添加一个小框用来存放图片，另一个小框添加左右按钮；

<div class="banner">
			<div class="imgbox">
				<img src="../../week2/day10/m5.jpg" />
				<img src="../../week2/day10/mt.jpg" />
				<img src="../../week2/day10/m0.jpg" />
				<img src="../../week2/day10/miao.jpg" />
				<img src="../../week2/day10/mm1.jpg" />
			</div>
			<div class="btns">
				<input type="button" id="left" value="<<<">
				<input type="button" id="right" value=">>>">
			</div>
		</div>

大框设置overflow，图片框宽度为总宽度；给图片和按钮设置定位

           .banner{
				width: 800px;
				height: 400px;
				overflow: hidden;
				margin: 20px auto;
				position: relative;
			}
			.imgbox img{
				width: 800px;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
			}
			.imgbox img:nth-child(1){
				z-index: 1
				}

            .btns input{
		    	position: absolute;
		    	top:180px;
				width:40px;
				height:40px;
		    	border: none;
		    	background: rgba(200,200,200,0.5);z-index: 9999999;
		    	}
				
            #left{
		    	left:0
		    	}
				
            #right{
		    	right:0
		    	}

js部分

 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.left.onclick = function() {
			//计算索引
				that.changeLeftIndex();
			}
			this.right.onclick = function() {
				that.changeRightIndex();
			}
		}
		Banner.prototype.changeLeftIndex= function() {
		//计算
			if (this.index === 0) {
				this.index = this.imgs.length - 1;
			} else {
				this.index--;
			}
			//4根据索引显示图片
			this.display(-1);

		}
		Banner.prototype.changeRightIndex= function() {
			if (this.index === this.imgs.length - 1) {
				this.index = 0;
			} else {
				this.index++
			}
			this.display(1);
		}

		Banner.prototype.display = function(type) {
		//显示图片
			this.imgs[this.index].style.zIndex = this.i++;
			this.imgs[this.index].style.left = this.imgs[0].style.offsetWidth*type+"px";
			move(this.imgs[this.index], {
				left: 0,
			})
		}

		new Banner();

2无缝版1；
与简易版布局大致相同，只需在图片的最后再加一张与第一张相同的图片作为过渡，给图片框imgbox设置定位，移动整个图片框达到无缝的效果；

		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() {
				that.changeIndex(-1);
			}
			this.right.onclick = function() {
				that.changeIndex(1);
			}
		}

		Banner.prototype.changeIndex = function(type) {
			if (type == -1) {
				if (this.index === 0) {
				//当索引为第一张时，回到真正的倒数第一张，索引设置为this.img.length - 2
					this.index = this.img.length - 2;
					//将imgbox的left值设置为最后一位的left值
					this.imgbox.style.left = -(this.img.length -1) * this.img[0].offsetWidth + "px";
					console.log(this.imgbox.style.left)
				} else {
					this.index--
				}
				console.log(this.index)
				this.display();
			} else {
			
				if (this.index === this.img.length - 1) {
				    //当索引到最后一个时，回到真正的第二张图片，索引为1
					this.index = 1;
					//索引设置好之后，将imgbox的left设置成初始值left:0
					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();

3无缝版2：
不需要多设置一张图片，将所有图片设置在大框外的位置，只留第一张作为当前即要离开的图片设置在框内的位置

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;
			//设置要离开图片索引
			this.iPrev = this.img.length - 1;

			this.init();
		}

		Banner.prototype.init = function() {
			var that = this;
			this.left.onclick = function() {
				that.changeIndex(-1);
			}
			this.right.onclick = function() {
				that.changeIndex(1);
			}
		}

		Banner.prototype.changeIndex = function(type) {
			if (type == -1) {
				if (this.index === 0) {
				//当前为第一张时，要进入的索引设置为最后一张
					this.index = this.img.length - 1;
					//要走的索引为0；
					this.iPrev = 0;
				} else {
					this.index--;
					this.iPrev = this.index + 1;
				}
				this.display(type)
			} else {
			
				if (this.index === this.img.length - 1) {
					this.index = 0;
					//当要进来的是第0张时，走的是最后一张
					this.iPrev = this.img.length - 1;
				} else {
					this.index++;
					//正常情况下，走的都是进来的上一张，上一张为当前-1
					this.iPrev = this.index - 1;
				}
				this.display(type);
			}
		}
	
		Banner.prototype.display = function(type) {
		    //根据要走的和要进来的索引
            // 先设置初始位置，然后再开始走(move)
            // 要走的：this.img[this.iPrev]
			this.img[this.iPrev].style.left = 0;
			move(this.img[this.iPrev], {
				left: -this.img[0].offsetWidth*type
			})
			// 要进来的：this.img[this.index]
			this.img[this.index].style.left = this.img[0].offsetWidth*type + "px";
			move(this.img[this.index], {
				left: 0
			})
		}

		new Banner()