3D图片轮播

最新推荐文章于 2025-04-23 14:18:08 发布
snowybieber
最新推荐文章于 2025-04-23 14:18:08 发布
阅读量852
点赞数 1
分类专栏： JS jQuery
JS 同时被 2 个专栏收录
2 篇文章
订阅专栏
jQuery
2 篇文章
订阅专栏
原博地址：https://blog.youkuaiyun.com/m0_38099607/article/details/72895927
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片轮播</title>
	<style>
		*{  
			margin: 0;
			padding: 0;
		}
		.box{
			margin-top: 100px;
			width: 100%;
			height:340px;
			position: relative;
		}
		.list{
			width: 1200px;
			height: 300px;
			overflow: hidden;
			position: absolute;
			left: 50%;
			margin-left: -600px;
		}
		.btn a:hover{
				
				opacity: 0.8;
		}
	
		.prev,.next{
			
			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-color: gray;
			opacity: 0.5;
			cursor: pointer;
			
			

		}
		.next{
		right: 0;
	    }
	    li{
	    	position: absolute;
	    	top: 0;
	    	left: 0;
		    list-style: none;
		    opacity: 0;
		    transition: all 0.3s ease-out;
	    }
	    img{
		width: 751px;
		height: 300px;
		border:none;
		float: left;
		filter: brightness(0.8);
		
	    }
	    img:hover{
	    	filter: brightness(1);

	    }
	.p1{
		transform:translate3d(-224px,0,0) scale(0.81);
	}
	.p2{
		transform:translate3d(0px,0,0) scale(0.81);
		transform-origin:0 50%;
		opacity: 0.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: 0.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;
		cursor: pointer;
	}
	.blue{
		background: gray;
		opacity: 0.5;
	}
	
	</style>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script >
		window.οnlοad=function(){
		var $a=$(".buttons a");
	    var $s=$(".buttons span");
	    var cArr=["p7","p6","p5","p4","p3","p2","p1"];
	    var index=0;
	    var ee;
	    //alert("hello!");
		$(".next").click(function(){nextimg();});
		$(".prev").click(function(){previmg();});

		//前一张
		function previmg(){
			//在数组起始位添加元素
			cArr.unshift(cArr[6]);
			//删除最后一个元素
			cArr.pop();
			/*1、2、3,三张图，样式为abc,b为放大展示的图样式，点击左移,那么3号图片应该为b样式，所以应该将样式重新赋给123，样式为cab*/

			//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 x=myindex-index;
				if (x==0) {
					return;
				}else if(x>0){
					/*
				 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
				 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
				 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
				 * 这时候原本的数组也将这部分数组进行移除了
				 * 再把移除的数组添加的原本的数组的后面
				 */
				 var newarr=cArr.splice(0,x);
				 cArr=$.merge(cArr,newarr);
				 //$.merge() 函数用于合并两个数组内容到第一个数组。

				 $("li").each(function(i,e){
				 	$(e).removeClass().addClass(cArr[i]);
				 });
				 index=myindex;//让index指向被展示的那一个
				 show();
				}
				else{
				 cArr.reverse();
			     var oldarr=cArr.splice(0,-x);
				 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");
			$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
			//eq() 方法返回带有被选元素的指定索引号的元素。
			//siblings() 方法返回被选元素的所有同级元素。

		}
		//点击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,2000);
	})

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


}
	</script>

</head>
<body>

	<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>
	<div class="btn">
	   <a href="javascript:;" class="prev"><</a>
	   <a href="javascript:;" class="next">></a>
	</div>
	   <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>	
    
</body>
</html>
亲测可用，通过理解别人的代码，一边学习css的写法还有js的思想，底部切换的写法有我疑惑的地方，不知道为什么p2和p4要执行函数，一直没有想明白为什么。。。。。。