html简单组件（七）：transform实现图片轮播

html简单组件（七）：transform实现图片轮播

实现效果图：

HTML代码

     <div class="box">
			<div class="list">
				<ul>
					<li id="g0" class="center"><img src="img/1.jpg" alt="" />li>
					<li id="g1" class="right"><img src="img/2.jpg" alt="" />li>
					<li id="g2" class="hidden"><img src="img/3.jpg" alt="" />li>
					<li id="g3" class="hidden"><img src="img/4.jpg" alt="" />li>
					<li id="g4" class="hidden"><img src="img/5.jpg" alt="" />li>
					<li id="g5" class="left"><img src="img/6.jpg" alt="" />li>
				ul>
			div>
			
			<div class="leftButton" onclick="changeLeft()"><div>
			
			<div class="rightButton" onclick="changeRight()">>div>
			
			<div class="buttons">
				<div id="b0" class="little">div>
				<div id="b1" class="little">div>
				<div id="b2" class="little">div>
				<div id="b3" class="little">div>
				<div id="b4" class="little">div>
				<div id="b5" class="little">div>
			div>
		div>

JS代码

JS代码引入Jquery

			var gArr = ["#g0","#g1","#g2","#g3","#g4","#g5"];
			var bArr = ["#b0","#b1","#b2","#b3","#b4","#b5"];
			var index = 0;
			
			$(function(){
     
				change(index);
			});
			
			/*点击按钮*/
			$(".little").click(function(){
     
				index = $(this).index();
				change(index);
			});
			
			/*业务执行*/
			function change(val){
     
				if(val == 6){
     
					index = 0;
				}else if(val == -1) {
     
					index = 5;
				}
				changeButton(index);
				changeImg(index);
			}
			
			/*向右切换*/
			function changeRight(){
     
				index ++;
				change(index);
			};
			
			/*向左切换*/
			function changeLeft(){
     
				index --;
				change(index);
			};
			
			/*切换按钮*/
			function changeButton(val){
     
				$(".little").removeClass("blue");
				var bStyle = bArr[val];
				$(bStyle).addClass("blue");
			}
			
			/*切换图片*/
			function changeImg(val){
     
				$("li").removeClass().addClass("hidden");
				var center = gArr[0];
				var left = gArr[5];
				var right = gArr[1];
				if(val == 0){
     
					center = gArr[0];
					left = gArr[5];
					right = gArr[1];
				}else if(val == 5){
     
					center = gArr[5];
					left = gArr[4];
					right = gArr[0];
				}else{
     
					center = gArr[val];
					left = gArr[val-1];
					right = gArr[val+1];
				}
				$(center).removeClass().addClass("center");
				$(left).removeClass().addClass("left");
				$(right).removeClass().addClass("right");
			};
			
			/*设置定时切换*/
			timer = setInterval(function(){
      
				changeRight();
			}, 3000);

CSS样式表

			* {
     
				margin: 0;
				padding: 0;
			}
			.box{
     
				width: 100%;
				height: 340px;
				position: relative;
				margin-top: 10px;
			}
			.list{
     
				width: 80%;
				height: 300px;
				overflow: hidden;
				position: absolute;
				left: 10%;
			}
			.leftButton,.rightButton{
     
				width: 70px;
				height: 100px;
				background-color: rgba(0, 255, 0, .5);
				position: absolute;
				font-size: 70px;
				margin-top: 100px;
				color: white;
				cursor: pointer;
			}
			.rightButton{
     
				right: 0px;
				text-align: right;
			}
			li {
     
				position: absolute;
				top: 0;
				left: 0;
				list-style: none;
				transition: all 0.3s ease-out;
				opacity: 0;
			}
			img {
     
				width: 750px;
				height: 300px;
				border: none;
				float: left;
			}
			/*首页第一张*/
			.center {
     
				transform: translate3d(35%, 0, 0) scale(1);
				z-index: 3;
				opacity: 1;
			}
			/*右侧图片*/
			.right {
     
				transform: translate3d(70%, 0, 0) scale(0.8);
				transform-origin: 100% 50%;
				opacity: 0.8;
				z-index: 2;
			}
			/*左侧图片*/
			.left {
     
				transform: translate3d(0, 0, 0) scale(0.8);
				transform-origin: 0 50%;
				opacity: 0.8;
				z-index: 2;
			}
			/*隐藏图片*/
			.hidden{
     
				transform: translate3d(0, 0, 0) scale(0.8);
				opacity: 0;
				z-index: 0;
			}
			.buttons {
     
				width: 280px;
				height: 30px;
				bottom: 0px;
				left: 50%;
				margin-left: -140px;
				position: absolute;
				text-align: center;
			}
			.little{
     
				display: block;
				width: 35px;
				height: 5px;
				float: left;
				margin-left: 10px;
				background: red;
				border-width: 0px;
				margin-top: 10px;
				border-radius: 5px;
			}
			.little:hover{
     
				cursor: pointer;
			}
			.blue {
     
				background: blue;
			}