js数组操作实现轮播效果

简介

通过把对数组进行重排序后再对图片进行重加载实现点击按钮切换上一个、下一个功能。

实现

具体实现请看代码，关键点有注释

<style type="text/css">
	#cardShow img {
		position: absolute;
		/* 绝对定位，方便图片布局操作 */
	}
	#cardShow {
		width: 100%;
		/* 因为是在移动端的样式
		有进行尺寸转化这里先不改了 */
		height: 33rem;
		position: relative;
		background-color: #f8d774;
	}
	.cardList-Button {
		color: rgba(255,255,255,0.3);
		height: 10rem;
		padding: 0;
		width: 5rem;
		line-height: 10rem;
		text-align: center;
		background-color: rgba(150,150,150,0.3);
		position: absolute;
		top: calc(50% - 5rem);
		font-size: 8rem;
		z-index: 8;
	}
	.cardListBox {
		/* 因为需要再加两个按钮触发点击事件
		所以父级元素必须有定位
		为了元素还能撑起高度所以使用相对定位 */
		position: relative;
	}
</style>
<div class="cardListBox">
	<div id="cardShow"></div>
	<input type="button" style="left: 1rem;" onclick="preCard()" class="cardList-Button" value="<" />
	<input type="button" style="right: 1rem;" onclick="nextCard()" class="cardList-Button" value=">" />
</div>
<script>
	/* 页面加载时先对图片进行一次加载 */
	loadImg();
	/* 图片url对应路径 */
	var cardUrlList = ['aaa.png','bbb.png','ccc.png'];
	/* 图片组加载方法
	主要实现方式通过length决定层级高度和样式宽高等属性
	其实就是动态生成每个图片的行内样式
	宽度、右侧距离、顶部距离、层级、透明度
	透明度主要是提供个视觉效果 */
	function loadImg() {
		var htmlDom = '';
		for(var i = 0; i < cardUrlList.length; i++){
			var cssTxt = 'width: '+ (60 - i * 5) +'%;'
						+'right: '+ (33 - i * 12) +'%;'
						+'top: '+ (5 + i * 5) +'%;'
						+'z-index: '+ (cardUrlList.length - i) +';'
						+'opacity: '+ (1 - i * 0.2) +';';
						
			htmlDom += '<img src="'+ cardUrlList[i] +'" style="'+ cssTxt +'" >';
		}
		$('#cardShow').html(htmlDom);
	}
	function preCard(){
		/* pop()方法取出原数组最后一个元素（改变数组长度）
		通过unshift()在数组首位插入pop取出的元素 */
		cardUrlList.unshift(cardUrlList.pop())
		loadImg()
	}
	
	function nextCard(){
		/* 通过shift()取出数组首位元素（改变数组长度）插入到数组最后一位 */
		cardUrlList.push(cardUrlList.shift())
		loadImg()
	}
</script>

总结

实现的比较简陋，没有动态的切换效果，要求图片的比例需要一致或者相同，不同设备可能cardbox高度显示效果还不一定相同，没有实现动态高度。再接再厉！