前端学习-图片轮播效果

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