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);

};