使用CSS實現一個簡單的幻燈片效果

本文轉載自查看原文 2016-09-24 15:07 11250 HTML & CSS

方法一：簡單的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="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來制作幻燈片

<!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>

點擊查看效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Css實現一個簡單的幻燈片效果頁面 css實現幻燈片播放效果 CSS3實現簡單的幻燈片純 CSS 實現幻燈片播放簡單的jQuery幻燈片實現利用css3的多背景圖屬性實現幻燈片切換效果原生JS實現幻燈片輪播效果使用scss + react + webpack + es6實現幻燈片 HTML5幻燈片效果 Slider Revolution實現幻燈片