简单的幻灯片实现

最新推荐文章于 2018-11-26 22:48:00 发布

凉城以北夜微凉

最新推荐文章于 2018-11-26 22:48:00 发布

阅读量221

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/hello_mujinhua/article/details/73250167

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、第一种方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
    img {
      display: none;
      width: 100px;
      height: 100px;
    }
 
    input:checked + img {
      display: block;
    }
 
    input {
      position: absolute;
      left: -9999px;
    }
 
    label {
      cursor: pointer;
    }
    </style>
</head>
<body>
    <div id="cont">
        <input id="img1" name="img" type="radio" checked="checked">
        <img src="1.jpg" width="100" height="100">
        <input type="radio" name="img" id="img2">
        <img src="2.jpg" width="100" height="100">
    </div>
    <div id="nav">
        <label for="img1">第一张</label>
        <label for="img2">第二张</label>
    </div>
</body>
</html>

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


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



2、第二种方法
<!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(1.jpg) no-repeat;
            }

            50% {
                background: url(2.jpg) no-repeat;
            }

            100% {
                background: url(3.jpg) no-repeat;
            }
        }

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

凉城以北夜微凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的幻灯片实现

1、第一种方法 img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute;
复制链接

扫一扫