方法一： 简单的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> 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>