您的位置:首页 > Web前端 > CSS

使用CSS实现一个简单的幻灯片效果

2018-09-09 23:15 585 查看

方法一: 简单的CSS代码实现幻灯片效果

话不多说,直接上代码

[code]<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS实现简单的幻灯片效果</title>
<style type="text/css">
img {
display: none;
width: 600px;
height: 600px;
}

input:checked + img {
display: block;
}

input {
position: absolute;
left: -9999px;
}

label {
cursor: pointer;
}

</style>
</head>
<body>
<div id="cont">
<input id="img1" type="radio" checked="checked" name="img"  />
<img src="http://www.gdzp.org/uploadfile/2014/0905/20140905052820850.jpg" />
<input id="img2" type="radio" name="img">
<img src="http://image72.360doc.com/DownloadImg/2014/05/2605/42035151_6.jpg" />
</div>
<div id="nav">
<label for="img1">第一张</label>
<label for="img2">第二张</label>
</div>

<!--兼容性: IE8以及IE8以下的浏览器不兼容,只显示文字,不显示图片-->

<!--以上代码实现使用到的技术:
除了设置相应的CSS样式,有两点值得注意:
1.设置按钮的位置(绝对定位) ,left:-9999px用来隐藏按钮;
2.<label>标签中的for属性与input标签中的id关联,然后根据input的checked的状态显示或隐藏图片,来达到显示幻灯片效果的目的。
-->

  <script type="text/javascript" src="http://runjs.cn/gist/lgkdjey6/all"></script>
</body>
</html>

 

大家看看,有不足的地方还请指正。

点击查看效果

源地址:http://zhidao.baidu.com/question/808066722818527652.html

方法二: 使用CSS3 Animation来制作幻灯片

[code]<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css3 实现幻灯片效果</title>
<style type="text/css">
.huanDengPic {
width: 600px;
height: 600px;
margin: 50px auto 0;
overflow: hidden;
box-shadow:  0 0 5px rgba(0,0,0,1);   /*CSS3 box-shadow属性,里面的值的设置s可以去网上查*/
background-size: cover;
background-position: center;
-webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/
-webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/
-webkit-animation-iteration-count: infinite;  /*检索或设置对象动画的循环次数,此处的"infinite"为无限循环的意思*/
}

@-webkit-keyframes "loops" {  /*动画名称和上面设置的动画名称一样*/
/*下面是动画过程*/
0% {
background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/kewnk2ermbe.jpg) no-repeat;
}

50% {
background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/j0qoejfukbu.jpg) no-repeat;
}

100% {
background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/oajlgqc2nud.jpg) no-repeat;
}
}

</style>
</head>
<body>
<div class="huanDengPic"></div>
</body>
</html>

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: