Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
div {
	width:600px;
	height:400px;
	margin:0 auto;
	border:solid 1px red;
	position:relative;
	overflow:hidden;
}
ul {
	width:2400px;
	height:400px;
	position:absolute;
	left:0;
	animation:aa 4s linear 0s infinite alternate;
}
li {
	width:600px;
	height:400px;
	font:60px/400px "微软雅黑";
	font-weight:600;
	text-align:center;
	float:left;
	background-color:cornflowerblue;
}
@keyframes aa {
	0% {
	left:0;
}
12.5% {
	left:0;
}
25% {
	left:-600px;
}
37.5% {
	left:-600px;
}
50% {
	left:-1200px;
}
62.5% {
	left:-1200px;
}
85% {
	left:-1800px;
}
100% {
	left:-1800px;
}
}.li1 {
	background-color:#0000FF;
}
.li2 {
	background-color:red;
}
.li3 {
	background-color:forestgreen;
}
.li4 {
	background-color:red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css实现的图片轮播主要用到了animation

0