2. 程式人生 > >HTML + CSS寫輪播圖

HTML + CSS寫輪播圖

阿新 • • 發佈：2019-02-11

HTML+CSS寫輪播圖

利用CSS3的新屬性，可以實現輪播，主要是利用CSS3的動畫的三要素：

（1）需要執行那個動畫 animation-name:動畫名
          animation-name:lunbo;
（2）需要建立一個名稱叫什麼的動畫
            @keyframes lunbo{ 
            from{ 
            初始狀態； 
            } 
            to{ 
            結束狀態； 
            } 
            }
（3）動畫持續的時長
 animation-duration:3s;

主要程式碼

//html程式碼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div>
            <ul
 
>
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"
 
/></li>
                <li><img src="img/6.jpg"/></li>
                <li><img src="img/7.jpg"/></li>
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/6.jpg"/></li>
                <li><img src="img/7.jpg"/></li>
            </ul>
        </div>
    </body>
</html>
//css程式碼：
*{
    margin: 0;
    padding: 0;
}
div{
    width: 882px;
    height: 86px;
    margin:  0 auto;
    border: 1px solid black;    
    overflow: hidden;   
}
ul{
    width: 1764px;
    height: 86px;
    animation: lunbo 3s infinite linear;
}
ul li{
    list-style: none;
    float: left;    
}
ul li img{
    width: 126px;
    height: 86px;
}
@keyframes lunbo{
    from{
        margin-left: 0px;
    }
    to{
        margin-left: -882px;
    }
}
div:hover ul{
    animation-play-state: paused;//滑鼠滑過時圖片停止
}
div:hover ul li{
    opacity: .5;//滑鼠劃過時設定透明
}
div ul li:hover{
    opacity: 1;
}

相關推薦

HTML + CSS寫輪播圖

HTML+CSS寫輪播圖 利用CSS3的新屬性，可以實現輪播，主要是利用CSS3的動畫的三要素： （1）需要執行那個動畫 animation-name:動畫名 animation-name:lunbo; （2）需要建立一個名稱

第一次嘗試自己寫輪播圖

parse function clas top 立即執行 嘗試 con arrow add 其實嗯，對於前端我與很多很多想說的話，但是看著種種最後卻不知道說什麽了，既然這樣那就什麽都不要說 第一次嘗試自己寫輪播圖，對於初學前端的我來說我感覺我晚了很久了 為什麽要模仿寫一份出

授人以漁式解析原生JS寫輪播圖

需求與分析 需求：迴圈無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，滑鼠點選輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。滑鼠放到輪播圖的圖片上時不再自動輪播並且左右箭頭顯示出來，滑鼠移開時左右箭頭隱藏掉並且自動輪播。 效果圖： 分析： 佈局：準備七張圖片

使用css實現輪播圖

使用css3實現圖片輪播 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖 工具介紹： 使用的編輯器： Hbuilder 進入正題 html程式碼： <div id="slide_show"> <div id

mpvue 怎麼寫輪播圖，直接用小程式的swiper元件就行了

目前用mpvue很多第三方的ui庫是引入不了的，因為它不支援含有dom操作。那我們要做輪播圖的話一個是手寫另外一個就是用小程式的swiper元件了：官方程式碼：<swiper indicator-dots="{{indicatorDots}}" autoplay="

vue中如何寫輪播圖

步驟： 1. 安裝vue-awesome-swiper npm install vue-awesome-swiper -S 2.在vue專案中引用vue-awesome-swiper main.js import VueAwesomeSwi

最簡單 最詳細的原生js寫輪播圖

最簡單最詳細的原生js寫輪播圖 該輪播圖實現了自動輪播，圖片切換，滑鼠移入移出事件，佈局簡單，容易上手。希望能幫到大家。效果圖如下： 佈局擴充套件 裡面用了幾種方式實現了div的垂直居中，可見樣式程式碼註釋。 HTML

用 jQuery 手寫輪播圖

padding 分享 out osi utf http asc con 核心 先上個效果截圖： 主要包含以下功能點： * 1、頁面加載完，自動循環翻頁* 2、翻頁按鈕，翻頁* 3、定點翻頁* 4、翻頁時同步圓點狀態* 5、鼠標進入，停止自動翻頁* 6、快速點擊翻頁的bug

關於html+js做輪播圖

簡單的輪播圖，沒有用ajax，單純的js+css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title

每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用

身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st

自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個

就會 定時器 pac color lis hover 路線 css 輪播圖 自寫：js輪播圖 鼠標劃過下方按鈕，繼續下一個 定時器關閉後再開啟一般都會按照原來的路線繼續走，不會因為你點了3而下個就會是4 $(".focus-rad>ul>li").hover(

CSS——輪播圖中的箭頭

輪播 arr one png color meta margin ack tex 註意事項： 1、定位中left權重比right高，top權重比bottom高 2、兩個span標簽嵌套在一個盒子中，將來顯示隱藏只需要控制父盒子就行了 <!DOCTYPE html&g

Javascript知識匯總------手寫jq輪播圖插件（2018-04-23 17:16）

sca mpat padding UNC pos ref tex height ansi <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

來寫一個輪播圖

wid HR off IT IE hid mpat 使用 3rd 輪播圖一直都是JS的經典實現: 有以下要素: 1.html和css布局的考察 浮動, 定位等 2.Dom操作 3.定時器使用與清除 4.遞歸函數的使用 下面是源代碼 <!DOCTYPE html&

原生JS寫一個淡入淡出輪播圖

切換 splay get 自動 sele round pos 鼠標 name 任何網站主頁都離不開一個輪播圖，這是滾動播放新聞或者廣告或者內容的招牌，類型有很多，我們可以做一個淡入淡出的輪播圖。 首先分析，淡入淡出指的是沒有滑動效果，一張圖片消失的時候另一張圖片接著顯示出來

vue慕課網音樂項目手記：5-手寫滾動輪播圖（上）

flow overflow box cor 慕課 efs PE osi 通過 在這一節，會封裝一些公用的函數來添加classname，改變image的寬度。 具體如下： 首先：封裝一個slider的組件 <template> <div cl

用原生JS 寫Web首頁輪播圖

get ext ++ posit containe add adding time 按鈕 目前自己在學習JS中，用目前學到的東西寫了一個輪播圖，能完整的實現輪播圖的功能，但是肯定還是有不完善的地方，也希望大家能留言交流，一起學習。 一、思路 首先將功能一個一個理順

CSS實現簡易的輪播圖

pad ont lin htm nbsp borde init flow dde <html> <head> <meta charset="UTF-8"> <title></title>

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

mobile_輪播圖_transform 版本_transform 讀寫二合一

輪播圖_transform 版本   關鍵點： 2D 變換 transform 不會改變 元素 在 文件流 中的位置 定位 position 會改變 元素 在 文件流 中的位置   touchstart 實現 無縫輪播： 建立兩組圖片，ulList.in