技術標籤：HTML簡單元件html5csscss3jquery輪播圖

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;
			}