首页 > 代码库 > 使用CSS实现一个简单的幻灯片效果
使用CSS实现一个简单的幻灯片效果
方法一： 简单的CSS代码实现幻灯片效果
方法二： 使用CSS3 Animation来制作幻灯片
方法一： 简单的CSS代码实现幻灯片效果
话不多说，直接上代码
<!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="img1.jpg" /> <input id="img2" type="radio" name="img"> <img src="img2.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的状态显示或隐藏图片，来达到显示幻灯片效果的目的。 --></body></html>
大家看看，有不足的地方还请指正。
源地址：http://zhidao.baidu.com/question/808066722818527652.html
方法二： 使用CSS3 Animation来制作幻灯片
<!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(img1.jpg) no-repeat; } 50% { background: url(img2.jpg) no-repeat; } 100% { background: url(img3.jpg) no-repeat; } } </style></head><body> <div class="huanDengPic"></div></body></html>
使用CSS实现一个简单的幻灯片效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。