純HTML和CSS實現JD輪播圖

dendoink 發布于2019-04-23 13:40 / 1566人閱讀

摘要：博主使用了純和實現了的輪播圖，沒有加動態效果，主要是使用了定位的知識。，如圖為兩個側邊箭頭圖片其實實際中應該使用的圖標字體，這里沒有使用。

　　博主使用了純HTML和CSS實現了JD的輪播圖，沒有加動態效果，主要是使用了定位的知識。

　　?，如圖為兩個側邊箭頭圖片(其實實際中應該使用CSS3的圖標字體，這里沒有使用)。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LunBotitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .lunbo{
            margin: 40px auto;
            height: 470px;
            width: 590px;
            position: relative;
        }
        .left,.right{
            position: absolute;
            top: 50%;
            margin-top: -18px;
            width: 24px;
            height: 36px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .lunbo ul{
            height: 18px;
            width: 151px;
            background: rgba(255,255,255,.3);
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -76px;
            border-radius: 10px;
        }
        .lunbo li{
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin: 2px;
        }
        .lunbo .current{
            background-color: #f40;
        }
    style>
head>
<body>
    <div class="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt="">div>
        
        <div class="right"><img src="images/right.png" alt="">div>
        <ul>
            <li class="current">li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    div>
body>
html>

?實現了如下效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2197.html

原生js + css3 + 定時器無縫輪播圖（部分）

摘要：起因現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖無縫，但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。 ## 起因 ## 現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖（無縫），但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。 ## 上代碼 ## html的代碼分類 ...

IamDLY 2019-08-23 15:21 評論0 收藏0
vue輪播圖插件之vue-awesome-swiper

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現觸摸滑動后，轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后，轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評論0 收藏0
【VIP視頻網站項目v1.0.3】基于Nodejs開發的VIP視頻網站項目及源碼分享

摘要：在線體驗地址源碼項目預覽主頁面登錄頁面注冊頁面會員中心電影播放頁面電影彈幕功能視頻網站項目已經完功能如下當前最新版本增加自動抓取功能，網站數據定期實時更新電影和電視劇數據抓取電影數據信息前端展現電影頁面圖片的自動抓取下載和展示代碼結構調整簡在線體驗地址:http://vip.52tech.tech/ GIthub源碼：https://github.com/xiugangzha......

Cympros 2019-08-23 14:50 評論0 收藏0
幾種原生js輪播圖

摘要：由于各種各樣的原因比如說懶，本文直接在代碼里面用注釋序號記錄實現的思路普通版原理一個包含多張圖片的其中所有的左浮動成一排，實際過程就是將往左右邊移動，改變值。由于各種各樣的原因（比如說懶），本文直接在代碼里面用注釋+序號記錄實現的思路 1.普通版原理：一個包含多張圖片的ul,其中所有的li左浮動成一排，實際過程就是將ul往左（右）邊移動，改變left值。效果圖：實際應用的時候.s...

CollinPeng 2019-08-01 17:32 評論0 收藏0