前端学习-图片轮播效果

js定时器实现

html标签

		

			
			1
		
		

			
		
		

			
		

js代码

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部分

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部分

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