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

};