Django打造大型企業官網（四）

4.3.輪播圖布局和樣式

templates/news/index.html

<div class="news-wrapper">
                <div class="banner-group">
                    <ul class="banner-ul">
                        <li>
                            <a href="">
                                <img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

src/css/index.scss

        .news-wrapper{
            float: left;
            width: 798px;
            height: 500px;
            background: #fff;

            .banner-group{
                width: 100%;
                height: 202px;
                background: #0a275a;

                .banner-ul{
                    overflow: hidden;
                    width: 798px * 4;

                    li{
                        float: left;
                        width: 798px;
                        height: 202px;

                        img{
                            width: 798px;
                            height: 202px;
                        }
                    }
                }
            }
        }

        .sidebar-wrapper{
            float: right;
            width: 356px;
            height: 500px;
            background: darkseagreen;
        }
    }
}

4.4.實現一次輪播

templates/news/index.html

<script src="../../dist/js/jquery-3.3.1.min.js" ></script>
<script src="../../dist/js/index.min.js" ></script>


<ul class="banner-ul" id="banner-ul">

src/js/index.js

//初始化
function Banner() {

};

//添加一個run方法
Banner.prototype.run = function () {
    var bannerUL = $("#banner-ul");
    //500是間隔時間0.5s
    bannerUL.animate({"left":-798},500)
};

//頁面加載完成后執行。創建一個對象，運行方法
$(function () {
    var banner = new Banner();
    banner.run()
});

4.5.實現自動輪播

src/js/index.js

//添加一個run方法
Banner.prototype.run = function () {
    var bannerUL = $("#banner-ul");
    var index = 0;
    setInterval(function () {
        if(index >= 3){
            index = 0
        }else{
            index++;
        }
        bannerUL.animate({"left":-798*index},500);
    },2000);

};