带层次感的图片轮播

最新推荐文章于 2022-03-19 15:35:43 发布

原创

最新推荐文章于 2022-03-19 15:35:43 发布 · 5.8k 阅读

9 ·

CC 4.0 BY-SA版权

这篇博客分享了如何创建一个带层次感的图片轮播，主要思路包括计算图片大小和位置，以及实现缓冲运动效果。作者使用了自封装的循环队列和外部运动库来实现这一功能，并邀请读者在其前端博客上查看完整DEMO。

原文摘自我的前端博客，欢迎大家来访问

http://hacke2.github.io/

起因

豪哥的JS练习又一波来袭~今天又写了个百度爱玩的东西，暂且叫他带层次感的图片轮播吧

图片可以很有层次感的切换

思路

主要思路有二

图片大小、位置的计算

我的思路是这样的：

因为首尾切换，我想到的就是自己封装一个循环队列

//封装一个循环队列
function CircularQueue(arr) {
    
    
	this.arr = arr || [];
}

//移除前一个，追加到最后
CircularQueue.prototype.shift = function() {
    
    
		var temp = this.arr.shift();
		this.arr.push(temp);
	}
//移除最后一个，追加到头部
CircularQueue.prototype.unshift = function() {
    
    
		var temp = this.arr.pop();
		this.arr<