js层级轮播图兼容IE8及以上浏览器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zyf1550397589/article/details/82661602

预览
本轮播图兼容ie8+浏览器,精华部分js+css,什么定时轮播,什么旋转,全部实现!

html代码

<div class="box">
	<div class="list">
		<ul>
			<li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>
			<li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>
			<li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>
			<li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>
			<li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>
			<li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>
			<li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>
		</ul>
	</div>	
	<a href="javascript:;" class="prev btn"><</a>
	<a href="javascript:;" class="next btn">></a>

	<div class="buttons">
		<a href="javascript:;"><span class="blue"></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
	</div>
</div>

js代码

<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
	function(){
	nextimg();
	}
)
$(".prev").click(
	function(){
	previmg();
	}
)
//上一张
function previmg(){
	cArr.unshift(cArr[6]);
	cArr.pop();
	//i是元素的索引，从0开始
	//e为当前处理的元素
	//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index--;
	if (index<0) {
		index=6;
	}
	show();
}

//下一张
function nextimg(){
	cArr.push(cArr[0]);
	cArr.shift();
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index++;
	if (index>6) {
		index=0;
	}
	show();
}

//通过底下按钮点击切换
$a.each(function(){
	$(this).click(function(){
		var myindex=$(this).index();
		var b=myindex-index;
		if(b==0){
			return;
		}
		else if(b>0) {
			/*
			 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
			 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
			 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
			 * 这时候原本的数组也将这部分数组进行移除了
			 * 再把移除的数组添加的原本的数组的后面
			 */
			var newarr=cArr.splice(0,b);
			cArr=$.merge(cArr,newarr);
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
		else if(b<0){
			/*
			 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
			 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
			 * 也就是从原本的照片到需要点击的照片的数组
			 * 然后将原本的数组跟取出的数组进行拼接
			 * 再次倒序,使原本的倒序变为正序
			 */
			cArr.reverse();
			var oldarr=cArr.splice(0,-b)
			cArr=$.merge(cArr,oldarr);
			cArr.reverse();
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
	})
})

//改变底下按钮的背景色
function show(){
		$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}

//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".p2",function(){
	previmg();
	return false;//返回一个false值，让a标签不跳转
});

//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".p4",function(){
	nextimg();
	return false;
});

//			鼠标移入box时清除定时器
$(".box").mouseover(function(){
	clearInterval(timer);
})

//			鼠标移出box时开始定时器
$(".box").mouseleave(function(){
	timer=setInterval(nextimg,4000);
})

//			进入页面自动开始定时器
timer=setInterval(nextimg,4000);
</script>

最重要的css代码来了,有两部分吆! 重点在p1-p7部分

1):css3编写的
*{margin:0;padding:0}
.box{margin-top:80px;width:100%;height:340px;position:relative}
.list{width:1200px;height:300px;overflow:hidden;position:absolute;left:50%;margin-left:-600px}
.btn{position:absolute;top:50%;margin-top:-50px;width:60px;height:100px;line-height:100px;font-size:30px;color:white;text-decoration:none;text-align:center;background:rgba(0,255,0,.5);cursor:pointer}
.next{right:0}
li{position:absolute;top:0;left:0;list-style:none;opacity:0;transition:all .3s ease-out}
img{width:751px;height:300px;border:0;float:left}
.p1{transform:translate3d(-224px,0,0) scale(0.81)}
.p2{transform:translate3d(0px,0,0) scale(0.81);transform-origin:0 50%;opacity:.8;z-index:2}
.p3{transform:translate3d(224px,0,0) scale(1);z-index:3;opacity:1}
.p4{transform:translate3d(449px,0,0) scale(0.81);transform-origin:100% 50%;opacity:.8;z-index:2}
.p5{transform:translate3d(672px,0,0) scale(0.81)}
.p6{transform:translate3d(896px,0,0) scale(0.81)}
.p7{transform:translate3d(1120px,0,0) scale(0.81)}
.buttons{position:absolute;width:1200px;height:30px;bottom:0;left:50%;margin-left:-600px;text-align:center;padding-top:10px}
.buttons a{display:inline-block;width:35px;height:5px;padding-top:4px;cursor:pointer}
span{display:block;width:35px;height:1px;background:red}
.blue{background:blue}

2):css2编写的,可以支持ie8及以上浏览器
img{width:100%;height:100%}
.box{width:100%;height:416px;position:relative}
.box .list{width:1200px;height:300px;overflow:hidden;position:absolute;top:60px;left:50%;margin-left:-600px}
.box .btn{position:absolute;width:22px;height:23px;line-height:24px;font-size:30px;color:white;text-decoration:none;text-align:center;background:rgba(0,255,0,.5);cursor:pointer}
.box .prev{background:url("img/b_l.png") no-repeat;bottom:8px;left:40%;z-index:10}
.box .next{background:url("img/b_r.png") no-repeat;bottom:8px;right:40%;z-index:10}
.box .list li{position:absolute;list-style:none;opacity:0;transition:all .3s ease-out}
.box .list li img{border:0;float:left}
.box .list li.p1{z-index:0;left:34px;top:41px;opacity:1;width:379px;height:218px}
.box .list li.p2{z-index:1;opacity:1;left:124px;top:28.8889px;width:421px;height:242px}
.box .list li.p3{z-index:2;width:467.901px;height:269.136px;opacity:1;left:230px;top:15.4321px}
.box .list li.p4{top:0;left:340px;width:520px;height:300px;z-index:3;opacity:1}
.box .list li.p5{z-index:2;width:468px;height:270px;right:230px;top:15px;opacity:1}
.box .list li.p6{z-index:1;opacity:1;right:124px;top:28.5px;width:421px;height:242px}
.box .list li.p7{z-index:0;opacity:1;right:34px;top:40.65px;width:379px;height:218px}
.box .list li span{position:absolute;bottom:0;left:0;display:block;height:50px;background-color:rgba(32,58,130,0.6);line-height:50px;font-size:16px;color:#fff;width:100%;text-align:center}
.box .list li a{width:100%;height:100%;display:block;z-index:10}
.box .list li i{background:url("img//sjx.png") no-repeat;position:absolute;bottom:46%;left:48%;width:60px;height:60px}
.box .buttons{position:absolute;width:1200px;height:30px;bottom:0;left:50%;margin-left:-600px;text-align:center;padding-top:10px}
.box .buttons a{display:inline-block;text-align:center;cursor:pointer}
.box .buttons span{display:block;width:10px;height:10px;background:url("img/por.png") no-repeat;margin:0 auto}
.box .buttons span.blue{width:22px;background:url("img/por_w.png") no-repeat}