零基础的人怎么用 HTML5 制作幻灯片

如题所述

html5可以使用代码实现的简单幻灯片,并且能用鼠标滚轮滚动进行换页。
具体代码如下:
<!doctype html>
<html>
<head>
<title></title>
<style>
#slides{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
overflow:hidden;
}
.slide{
position:absolute;
height:600px;
width:800px;
opacity:0.7;
background-color:rgba(0, 128, 196, 0.5) !important;
background-color:#ccc;
border-radius:10px;
left:50%;
top:50%;
margin-top:-300px;
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
transition:all 0.25s ease-in-out 0s;
}
.current{
opacity:1;
margin-left:-400px;
}
.future{
margin-left:450px;
transform: skew(-3deg) scale(0.8);
-webkit-transform: skew(-3deg) scale(0.8);
}
.post{
margin-left:-1250px;
transform: skew(3deg) scale(0.8);
-webkit-transform: skew(3deg) scale(0.8);
}
.far-future{
margin-left:1200px;
transition:none;
温馨提示:答案为网友推荐,仅供参考
第1个回答  2017-02-03
熟练使用a标签的href属性即可。