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

纯css实现幻灯片轮播效果

2017-12-14 15:14 369 查看
<!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="1.jpg" />

        <input id="img2" type="radio" name="img">

        <img src="2.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航