图片轮播:
方法一:
通过CSS3的animation属性以及 @keyframes规则实现。
首先学习 CSS3当中的@keyframes和animation。
@keyframes规则—用于创建动画,在@keyframes中规定某个CSS样式,就能创建
由当前样式逐渐变成新样式的动画效果。
浏览器支持:
Internet Explorer 10 (IE10)、Firefox 、Opera 支持 animation属性以及 @keyframes规则,chrome、Safari 需要加前缀 “-webkit-”(注意: IE9 以及更早的版本,不支持 animation属性以及 @keyframes规则)
@keyframes 语法: @keyframes 函数名(自定义){
内容:eg:
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
} CSS3 动画
用@keyframes规则传创建动画时,需要将其(函数名)绑定到某个选择器,否则不会产生动画效果。
方法二: 通过Jquery的新形式实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#screen{height:9999px;width:9999px;animation:myfirst 8s;}
#screen img{float:left;}
#main{height:300px;width:200px;overflow:hidden;}
@keyframes myfirst {
25%{transform:translateX(0px)}
30%{transform:translateX(-300px)}
50%{transform:translateX(-300px)}
55%{transform:translateX(-600px)}
75%{transform:translateX(-600px)}
80%{transform:translateX(-900px)}
100%{transform:translateX(-900px)}
}
</style>
</head>
<body>
<div id="main">
<div id="screen">
<img src="background-image/list_1.jpg" height="200"width="300">
<img src="background-image/list_2.jpg" height="200"width="300">
<img src="background-image/list_3.jpg" height="200"width="300">
<img src="background-image/list_4.jpg" height="200"width="300">
</div>