欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

提示：以下是本篇文章正文內容，下面案例可供參考

一、結構的分析

這里是使用插件實現輪播圖，關于插件的用法在以往的文章中有講到過怎樣在css中設置背景圖輪播怎樣在css中設置背景圖輪播，對是哦也使用方法太明白的同學可以翻閱查看一下。關于結構的劃分大概可分為如下幾個部分

示例圖：

二、實現過程 1.HTML結構

代碼如下（示例）：

        

            

                

                    

                        

                        

                        

                        

                        

                        

                        

                        

                        

                    
                    
                    


                    
                    

                    

                
                <script>
                    var mySwiper = new Swiper('.swiper', {
                        autoplay: true,
                        loop: true, // 循環模式選項
                        // 如果需要分頁器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        // 如果需要前進后退按鈕
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })        
                </script>

                
                

                    
                    
PC 安卓 iPhone WP iPad Mac 六大客戶端
                
            
        

2.CSS樣式

代碼如下（示例）：

   /* 輪播圖區域樣式 */
        .outer {
            width: 100%;
            height: 285px;
            background-image: url(../img/首頁圖庫/background-image2.jpg);
        }
        .swiper-inner {
            position: relative;
            width: 984px;
            height: 285px;
            margin: 0 auto;
        }

        .swiper {
            width: 100%;
            height: 285px;
            overflow: hidden;
        }
        .swiper-wrapper>div>img {
            width: 730px;
            height: 285px;
        }
        .prev {
            position: absolute;
            left: -68px;
            top: 50%;
            display: block;
            width: 37px;
            height: 63px;
            background-image: url(../img/首頁圖庫/首頁輪播圖.png);
            background-position: 0 -360px;
        }
        .prev:hover {
            background-image: url(../img/首頁圖庫/首頁輪播圖.png);

            background-position: 0 -430px;
        }
        .next {
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -31px;
            width: 37px;
            height: 63px;
            right: -68px;
            background-image: url(../img/首頁圖庫/首頁輪播圖.png);
            background-position: 0 -508px;
        }
        .next:hover{
            background-image: url(../img/首頁圖庫/首頁輪播圖.png);
            background-position: 0 -578px;
        }
        .download-app {
            position: absolute;
            top: 0;
            left: 730px;
            width: 254px;

            height: 285px;
            background-image: url(../img/首頁圖庫/download.png);
            z-index: 20;
            border-left: 1px solid #292725;
            border-right: 1px solid #292725;
        }
        .download-app>#btn {
            display: inline-block;
            width: 215px;
            height: 56px;
            margin: 186px 0 0 19px;
        }
        .download-app>#btn:hover {
            background-image: url(../img/首頁圖庫/download.png);
            background-position: 0 -290px;
        }
        .download-app p {
            margin: 10px 0px;
            color: #8d8d8d;
            text-align: center;
            font-size: 12px;
        }

總結