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

阿新 • • 發佈：2018-11-09

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

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

方法一：簡單的CSS程式碼實現幻燈片效果話不多說，直接上程式碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>C

用CSS寫一個簡單的幻燈片效果頁面

fill for tar mode stat xpl fir ng- 語法規則這裏是修真院前端小課堂，每篇分享文從【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】八個方面深度解析前端知識/技能，本篇分享的是：【用CSS

用Vue實現一個簡單的輪播效果

Vue實現簡單的輪播效果，用的的一些常用系統指令： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

HTML、CSS、JavaScript 實現一個簡單的計算器

計算器效果圖：程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>計算器</title> </head

【原創】實現一個簡單的移動端左右滑動翻頁+ 點選下標翻頁利用：HTML5+CSS+Js

//【如何做一個簡單的手機端頁面的翻頁】//第一步：建立移動端頁面內 HTML + CSS 【注】可用彈性佈局但需要注意的是外層盒子的定位//第二步：思考問題要實現怎樣的效果？//1. 手指滑動時觸發事件【左右】兩個方向 //2.點選footer部分的下

ScreenToViewportPoint，WorldToViewportPoint，ViewportToWorldPoint的運用，實現一個簡單的對三維中物體的拖拽移動效果

　　眾所周知，我們手機或者手機螢幕上的座標是一個二維平面的的座標值，而且這個座標是一畫素為單位的，也就是說這個是會根據你用的裝置的不同，你手機或者電腦上的座標的長寬最大值也就不同。　　之前不太瞭解標題上三個方法的用法，走了不少彎路，然後下來仔細研究了一下，感覺還是挺有收穫的。　　簡單說一下，我們在Unit

使用ListView實現一個簡單的學生資訊展示效果

這篇部落格將介紹一下下圖中的效果的實現方式實現方式，使用Android Studio建立一個Android工程 1、修改activity_layout.xml中的程式碼 <?xml version="1.0" encoding="utf-8"?> <

用JS實現一個簡單的加減購物車效果

1.書寫input輸入框作為加減實現的效果。 2.加減按鈕用button按鈕來實現 3.利用js控制i的值作為輸入框中的值。實現的效果：完整程式碼如下： <!DOCTYPE html> <html> <head>

實現一個簡單的lazyman

實現 blog cti name init timeout bin bsp stack function lazyman(name) { return new lazyman.fn.init(name); } lazyman.fn = lazyman.proto

用java實現一個簡單的單用戶登陸功能的思路

get 單用戶這樣的簡單的 lock ref 數據庫清除一個引用所謂“單用戶單賬戶登錄”是指：在同一系統中，一個用戶名不能在兩個地方同時登錄。我們參照 QQ 實現效果：當某賬號在 A 處登錄後，在未退出的情況下，如果再到 B 處登錄，那麽，系統會擠下 A 處

【Java】Swing+IO流實現一個簡單的文件加密程序

als oncommand override fault 源文件 abs directory imp select EncrytService package com.my.service; import java.io.File; import java

【Java】Swing+IO流實現一個簡單的文件加密程序（較完整版）

move 初始 baidu images 文件選擇器 while login 一個 ktr 留著參考 beans package com.my.bean; import java.io.Serializable; public class

Linux中實現一個簡單的進度條【轉】

做的會有發現文件 rsquo 實時時間改進常見轉自：http://blog.csdn.net/yuehailin/article/details/53999288 說起進度條，其實大家常常見到，比如說你在下載視頻或文件的時候，提示你當前下載進度的就是我們今天

用 C# 實現一個簡單的 Rest Service 供外部調用

message [] operation rem adk www span method title 用 C# 實現一個簡單的 Restful Service 供外部調用，大體總結為4點： The service contract (the methods it o

Css實現一個菜單導航

名稱標簽 idt abs 子div doc hit 字體 lan 提要:使用大div定位設置為relative,子div設置為absolute實現菜單下拉實現代碼： 1 <!DOCTYPE html> 2 <html lang="en"&

jQuery實現一個簡單的購物車功能

名稱展示 -1 set margin for button ans return 最近由於工作需要的原因，開始系統學習jQuery的知識，然後跟著一個視頻教程做了一個購物車的功能，現總結如下。第一步：準備HTML頁面，代碼如下： <!DOCTYPE html P

使用SVG + CSS實現動態霓虹燈文字效果

rdp orm ans cnblogs fill href 大神 case ima 效果圖：原理：多個SVG描邊動畫使用不同的animation-delay即可！對於一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，並且

實現一個簡單的ConnectionPool

方法 == span sql 需要動手 cti 修改使用看了一圈, 沒看到稍微好用的ConnectionPool, 除了一個aiomysql, 但是這個是異步的, 我暫時沒有用到這麽高版本的Python, 所以就動手造一個輪子. 原理比較簡單, 先造一個線程安全的集

實現一個簡單的虛擬demo算法

child mov 箭頭內存架構模式 ren 操作 inpu 設置假如現在你需要寫一個像下面一樣的表格的應用程序，這個表格可以根據不同的字段進行升序或者降序的展示。這個應用程序看起來很簡單，你可以想出好幾種不同的方式來寫。最容易想到的可能是，在你的 JavaScr

自己動手實現一個簡單的JSON解析器

pair bool 優點輕量結束 pan isdigit 復雜 false 1. 背景 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。相對於另一種數據交換格式 XML，JSON 有著諸多優點。比如易讀性更好，占用空間更少等

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

相關推薦