html+css實現幻燈片自動輪番代碼

html+css實現幻燈片自動輪番代碼

好玩代碼樂樂2019-09-01 0:00:34468A+A-

程序演示

html+css實現幻燈片自動輪番代碼-第1張圖片-零零娛樂網


html

  <div id="slider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="active">
        </li>
        <li data-target="#slider" data-slide-to="1" class="">
        </li>
        <li data-target="#slider" data-slide-to="2" class="">
        </li>
        <li data-target="#slider" data-slide-to="3" class="">
        </li>
        <li data-target="#slider" data-slide-to="4" class="">
        </li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a target="_blank" href="https://www.tx47.cn/xcbk-467.html">
                <img src="https://www.tx47.cn/content/uploadfile/201903/thum-daf31553512108.jpg">
                <span class="carousel-caption">
                Emlog資源網Meta收費模板                </span>
                <span class="carousel-bg">
                </span>
            </a>
        </div>
        <div class="item active">
            <a target="_blank" href="https://www.tx47.cn/xcbk-498.html">
                <img src="https://www.tx47.cn/content/uploadfile/201903/thum-47761553978947.png">
                <span class="carousel-caption">
                寶塔面板0.99買30天Linux專業版                </span>
                <span class="carousel-bg">
                </span>
            </a>
        </div>
        <div class="item">
            <a target="_blank" href="https://www.tx47.cn/xcbk-450.html">
                <img src="https://www.tx47.cn/content/uploadfile/201812/thum-f3cc1543762081.jpg">
                <span class="carousel-caption">
                支付寶賞金掃一掃拿煙錢                </span>
                <span class="carousel-bg">
                </span>
            </a>
        </div>
        <div class="item">
            <a target="_blank" href="https://www.tx47.cn/xcbk-496.html">
                <img src="https://www.tx47.cn/content/uploadfile/201903/thum-4a471553268104.png">
                <span class="carousel-caption">
                寶塔面板0.01組團買三年插件                </span>
                <span class="carousel-bg">
                </span>
            </a>
        </div>
        <div class="item">
            <a target="_blank" href="https://www.tx47.cn/xcbk-248.html">
                <img src="https://www.tx47.cn/content/uploadfile/201808/thum-88a11535163333.png">
                <span class="carousel-caption">
                價值80易支付程序源碼                </span>
                <span class="carousel-bg">
                </span>
            </a>
        </div>
    </div>
    <a class="left carousel-control" href="#slider" role="button" data-slide="prev">
        <span class="fa fa-angle-left" aria-hidden="true">
        </span>
    </a>
    <a class="right carousel-control" href="#slider" role="button" data-slide="next">
        <span class="fa fa-angle-right" aria-hidden="true">
       </span>
    </a>
</div>


css

/*幻燈片輪番*/
.category-job .header,.category-see .header,.page-template-pagesnavs-php .header,.page-template-pagestheme-php .header,.page-template-pagesthemes-php .header,.page-template-pagestools-php .header,.site-minicat .header{box-shadow:none;border-bottom:none;margin-bottom:0}
.carousel{border:1px solid #eaeaea;padding:2px;margin-bottom:10px}
.carousel-inner{width:100%}
.carousel-inner>.item{position:relative;display:none;text-align:center;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}
.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1;width:100%;height:340px;margin-bottom:-10px}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
.carousel-inner>.active{left:0}
.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
.carousel-inner>.next{left:100%}
.carousel-inner>.prev{left:-100%}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
.carousel-inner>.active.left{left:-100%}
.carousel-inner>.active.right{left:100%}
.carousel-control{position:absolute;top:50%;left:2px;width:30px;height:50px;margin-top:-30px;font-size:20px;color:#fff;text-align:center;filter:alpha(opacity=35);opacity:.35;background-color:#000}
.carousel-control.right{right:2px;left:auto}
.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=70);outline:0;opacity:.7}
.carousel-control .fa-angle-left,.carousel-control .fa-angle-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;margin-top:-10px;left:12px;z-index:5;display:inline-block}
.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif}
.carousel-control .icon-prev:before{content:'\2039'}
.carousel-control .icon-next:before{content:'\203a'}
.carousel-indicators{position:absolute;margin-bottom:0;bottom:0;right:12px;z-index:15;width:78%;height:47px;/* padding: 11px 0 0; */;text-align:right}
.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:15px 5px 0 0;text-indent:-999px;background-color:transparent;border:1px solid #fff;border-radius:10px}
.carousel-indicators .active{background-color:#fff}
.carousel-caption{position:absolute;right:0;bottom:0;left:0;z-index:10;text-align:left;padding:10px;margin-right:100px;overflow:hidden;color:#fff;font-size:16px}
.asb,.asb-your,.branding{text-align:center}
.carousel-bg{position:absolute;right:0;bottom:0;left:0;height:40px;z-index:9;background-color:#000;filter:alpha(opacity=70);opacity:.7}
.site-navbar li:hover,.topmenu li:hover{z-index:2}
.brand,.content,.sidebar,.site-navbar li{position:relative}
.carousel-caption .btn{text-shadow:none}
.carousel,.carousel-inner,.container,.header,.label{position:relative;overflow:hidden}
.carousel {padding: 10px;box-sizing: initial;background: #fff;}


html+css實現幻燈片自動輪番代碼-第2張圖片-零零娛樂網

感謝您的支持,我會繼續努力的!

html+css實現幻燈片自動輪番代碼-第3張圖片-零零娛樂網
掃碼打賞,你說多少就多少

打開支付寶掃一掃,即可進行掃碼打賞哦

點擊這里復制本文地址 以上內容由零零娛樂網整理呈現,請務必在轉載分享時注明本文地址!如對內容有疑問,請聯系我們,謝謝!

支持Ctrl+Enter提交

零零娛樂網 © All Rights Reserved.  

本站資源來自互聯網收集,僅供用于學習和交流,請遵循相關法律法規,本站一切資源不代表本站立場,如有侵權、后門、不妥請聯系本站刪除

投稿/侵權投訴郵箱:[email protected] 商務合作QQ:563161067

備案:豫ICP備18019668號
聯系我們| 網站地圖| 留言建議| 網站管理

網站公告×

本站開啟密碼找回功能

忘記密碼也可以聯系站長設置新密碼


大家對本站有什么建議的可以私聊站長或點擊這里提出
湖北快3推荐一定牛 梦幻国际棋牌新版下载 30选5玩法 捕鱼游戏怎么玩打哪里 广东36选7今天开奖号 打码赚钱网站 二三四五股票股吧 追光棋牌 彩金捕鱼ol可兑换现金 上海时时乐走势图单选 分分彩后一大小规律