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

-Advertisement-

方法一：簡單的CSS代碼實現幻燈片效果方法二：使用CSS3 Animation來製作幻燈片方法一：簡單的CSS代碼實現幻燈片效果話不多說，直接上代碼大家看看，有不足的地方還請指正。源地址：http://zhidao.baidu.com/question/808066722818527 ...

方法一：簡單的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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JavaScript 的 defer 與 async

當解析器遇到 script 標簽時，文檔的解析將停止，並立即下載並執行腳本，腳本執行完畢後將繼續解析文檔。但是我們可以將腳本標記為 defer，這樣就不會停止文檔解析，等到文檔解析完成才執行腳本，也可以將腳本標記為 async，以便由其他線程對腳本進行解析和執行。 <! more 三者之間的區別？ ...
超全的web開發工具和資源

作為Web開發者，這是好的時代，也是壞的時代。Web開發技術也在不斷變化。雖然很令人興奮，但是這也意味著Web開發人員需要要積極主動的學習新技術和新的編程語言，並願意和渴望接受新的挑戰，以適應變化。新的挑戰可能會包括一些開發上的要求，如利用適應現有的框架來滿足業務需求。測試一個網站，能從中知道出了哪 ...
關於js原型的面試題

今天遇到關於javascript原型的一道面試題，現分析下：原題如下： function A(){ } function B(a){ this.a = a; } function C(a){ if(a){ this.a = a; } } A.prototype.a = 1; B.prototype ...
CSS3樣式中新添加的屬性

border-radius：允許向元素添加圓角 box-shadow：陰影設置多層陰影 box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多層陰影*/ border-image屬性用 ...
用js實現簡單排序演算法

一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j++){ var temp=0; if(arr1[i]>arr1[j]){ temp=arr1[i]; arr1 ...
HTML DOM

先上圖 1.一些常用的方法 obj.getElementById() 返回帶有指定 ID 的元素。 obj.getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。 obj.etElementsByClassName() 返回包含帶有指定類名的所 ...
關於CSS反射倒影的研究思考

原文地址：https://css-tricks.com/state-css-reflections 譯者：nzbin 友情提示：由於演示demo的相容性，推薦火狐瀏覽。該文章篇幅較長，內容龐雜，有一定難度。而我本人學識有限，加之時間倉促，所翻譯內容可能有不恰當及晦澀之處。歡迎大家拍磚指正。我最近在 ...
事件的三種綁定方式

1.行內式綁定事件處理另外一種寫法: 這時候,這個函數的作用於這就這個對象本身(input),所以我們可以通過this獲取input的任何屬性。缺點: 1.html與js代碼的耦合性高 2.在事件函數未預編譯之前，點擊可能會報錯 3.這樣的事件處理程式在不同瀏覽器中的作用於鏈有差別 2.dom0 ...