前端學習-圖片輪播效果

js定時器實現

html標籤

		<div id="box">
			<img src="img/pic1.jpg" />
			<span id="page">1</span>
		</div>
		<div id="btn1" onclick="back()">
			<img src="img/btn1.png" />
		</div>
		<div id="btn2" onclick="next()">
			<img src="img/btn2.png" />
		</div>

js代碼

	<script>
		var box = document.getElementById('box');
		// var img = document.createElement("img");
		// img.setAttribute('src', 'img/pic1.jpg'); //給標籤定義src鏈接
		// box.appendChild(img);
		box.style.float = "left";

		var imgs = document.getElementsByTagName('img')[0];
		var spans= document.getElementsByTagName('span')[0];
		var arrUrl = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg'];
		var num = 0;


		//添加定時器
		function autoPlay() {
			timer = setInterval(function() {
				num++;
				num %= arrUrl.length; //以數組長度來循環切換
				imgs.src = arrUrl[num]; //顯示第num張圖片
				spans.innerHTML = num+1+'/'+arrUrl.length;
			}, 2000);
		}
		autoPlay(); //函數直接調用，打開頁面就開始輪播
		// setTimeout(autoPlay, 2000); //打開頁面2秒鐘之後再開始輪播


		//下一張
		function next() {
			num++;
			num %= arrUrl.length; //以數組長度來循環切換
			imgs.src = arrUrl[num]; //顯示第num張圖片
			spans.innerHTML = num+1+'/'+arrUrl.length;
		}
	</script>

css

#box{
	position: absolute;
	left: 200px;
	right: 200px;
	top: 22px;
}
#btn1{
	float: left;
	position: absolute;
	left: 20px;
	top: 50%;
}
#btn2{
	float: right;
	position: absolute;
	right: 20px;
	top: 50%;
}
span{
	position: absolute;
	left: 50%;
	bottom: -20px;
	color: blueviolet;
}

css使用animation實現

html部分

<div></div>	

css

div {
	position: absolute;
	left: 200px;
	right: 200px;
	top: 22px;
	width: 1000px;
	height: 561px;
	background: #ffffff;
	
	/* animation-iteration-count: infinite; //動畫播放次數 無限次 */
	animation: myfirst 8s linear 1s infinite normal;
	
	-moz-animation: myfirst 8s linear 1s infinite normal;
	/* Firefox */
	-webkit-animation: myfirst 8s linear 1s infinite normal;
	/* Safari and Chrome */
	-o-animation: myfirst 8s linear 1s infinite normal;
	/* Opera */
}

@keyframes myfirst {
	0% {background-image: url(../img/pic1.jpg);}
	35% {background-image: url(../img/pic2.jpg);}
	70% {background-image: url(../img/pic3.jpg);}
	100% {background-image: url(../img/pic1.jpg);}
}

@-moz-keyframes myfirst

/* Firefox */
	{
	0% {
		background-image: url(../img/pic1.jpg);
		
	}

	35% {
		background-image: url(../img/pic2.jpg);
		
	}

	70% {
		background-image: url(../img/pic3.jpg);
		
	}

	100% {
		background-image: url(../img/pic1.jpg);
		
	}
}

@-webkit-keyframes myfirst

/* Safari and Chrome */
	{
	0% {
		background-image: url(../img/pic1.jpg);
		
	}

	35% {
		background-image: url(../img/pic2.jpg);
		
	}

	70% {
		background-image: url(../img/pic3.jpg);
		
	}

	100% {
		background-image: url(../img/pic1.jpg);
		
	}
}

@-o-keyframes myfirst

/* Opera */
	{
	0% {
		background-image: url(../img/pic1.jpg)
	}

	25% {
		background-image: url(../img/pic2.jpg)
	}

	50% {
		background-image: url(../img/pic3.jpg)
	}

	100% {
		background-image: url(../img/pic1.jpg)
	}
}

css使用animation實現往左逐漸移動效果

html部分

		<div>
			<ul>
				<li><img src="img/pic1.jpg" /></li>
				<li><img src="img/pic2.jpg" /></li>
				<li><img src="img/pic3.jpg" /></li>
			</ul>
		</div>

css

dl, ol, ul {
    padding: 0;
}
div {
	position: absolute;
	left: 200px;
	right: 200px;
	top: 22px;
	width: 1000px;
	height: 561px;
	background: #ffffff;
	overflow: hidden;
}

li {
	float: left;
	width: 1000px;
	height: 561px;
}

ul {
	width: 3000px;
	height: 561px;

	
	/* animation-iteration-count: infinite; //動畫播放次數 無限次 */
	animation: myfirst 50s ease-in-out 0s infinite normal;
	
	-moz-animation: myfirst 50s ease-in-out 0s infinite normal;
	/* Firefox */
	-webkit-animation: myfirst 50s ease-in-out 0s infinite normal;
	/* Safari and Chrome */
	-o-animation: myfirst 50s ease-in-out 0s infinite normal;
	/* Opera */
}




@keyframes myfirst {
	0% {
		margin-left: 0px;
	}

	20% {
		margin-left: -1000px;
	}
	25% {
		margin-left: -1000px;
	}

	45% {
		margin-left: -2000px;
	}
	50% {
		margin-left: -2000px;
	}
	
	70% {
		margin-left: -1000px;
	}
	75% {
		margin-left: -1000px;
	}
	
	95% {
		margin-left: 0px;
	}
	100% {
		margin-left: 0px;
	}


}

@-moz-keyframes myfirst

/* Firefox */
	{
	0% {
		margin-left: 0px;
	}

	20% {
		margin-left: -1000px;
	}
	25% {
		margin-left: -1000px;
	}

	45% {
		margin-left: -2000px;
	}
	50% {
		margin-left: -2000px;
	}
	
	70% {
		margin-left: -1000px;
	}
	75% {
		margin-left: -1000px;
	}
	
	95% {
		margin-left: 0px;
	}
	100% {
		margin-left: 0px;
	}
}

@-webkit-keyframes myfirst

/* Safari and Chrome */
	{
	0% {
		margin-left: 0px;
	}

	20% {
		margin-left: -1000px;
	}
	25% {
		margin-left: -1000px;
	}

	45% {
		margin-left: -2000px;
	}
	50% {
		margin-left: -2000px;
	}
	
	70% {
		margin-left: -1000px;
	}
	75% {
		margin-left: -1000px;
	}
	
	95% {
		margin-left: 0px;
	}
	100% {
		margin-left: 0px;
	}
}

@-o-keyframes myfirst

/* Opera */
	{
	0% {
		margin-left: 0px;
	}

	20% {
		margin-left: -1000px;
	}
	25% {
		margin-left: -1000px;
	}

	45% {
		margin-left: -2000px;
	}
	50% {
		margin-left: -2000px;
	}
	
	70% {
		margin-left: -1000px;
	}
	75% {
		margin-left: -1000px;
	}
	
	95% {
		margin-left: 0px;
	}
	100% {
		margin-left: 0px;
	}
}