<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block head %}<title></title>{% endblock head %}
    <link rel="stylesheet" href="{% static '/user/bulma.css' %}">

</head>
<style type="text/css">
    body {
        background-image: url("../../static/user/images/bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    #lunbotu {
        width: 1226px;
        height: 460px;
        overflow: hidden;
        position: relative;
        margin: 0px auto;
        position: relative;
    }

    #banner {
        height: 460px;
        width: 6130px;
        position: absolute;
        transition: 2s;
        left: 0px;
    }

    #banner img {
        float: left;
    }

    #biao {
        position: absolute;
        top: 430px;
        left: 43%;
    }

    #biao_1 {
        height: 20px;
        width: 20px;
        border: 1px solid #000;
        z-index: 10;
        float: left;
        list-style: none;
        border-radius: 50%;
        margin-left: 20px;
        text-align: center;
        cursor:pointer;
    }
</style>
<body>
    <div class="container" style="opacity: 70%;">
        {% block content %}

        {% endblock content %}
    </div>
    <footer class="footer container" style="opacity: 70%;">
        <div class=" has-text-centered">
            <div id="lunbotu">
                <div id="banner">
                    <img class="m" src="../../static/user/images/one.jpg" style="width: 1225px; height: 450px;" />
                    <img class="m" src="../../static/user/images/two.jpg" style="width: 1225px; height: 450px;" />
                    <img class="m" src="../../static/user/images/three.jpg" style="width: 1225px; height: 450px;" />
                    <img class="m" src="../../static/user/images/four.jpg" style="width: 1225px; height: 450px;" />
                    <img class="m" src="../../static/user/images/five.jpg" style="width: 1225px; height: 450px;" />
                </div>
                <div id="biao">
                    <ul>
                        <li id="biao_1">1</li>
                        <li id="biao_1">2</li>
                        <li id="biao_1">3</li>
                        <li id="biao_1">4</li>
                        <li id="biao_1">5</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>
<script type="text/javascript">
        var slid = document.getElementById("banner");
        var imgwidth = document.getElementsByClassName("m");
        var oli=document.getElementsByTagName("li");
        var i =0;
        auto();
        oli[0].style.cssText="background:#ff6700;color:#fff;";
        function auto(){
            time = setInterval(function(){
                i++;
            if(i <= 4) {
                slid.style.left = slid.offsetLeft - 1226 + "px";
                oli[i].style.cssText="background:#ff6700;color:#fff;";
                oli[i-1].style.cssText="background:none;color:#000;";
            } else {
                slid.style.left ="0px";
                oli[4].style.cssText="background:none;color:#000;";
                oli[0].style.cssText="background:#ff6700;color:#fff;";
                i=0;
            }
            console.log(i);
        }, 3000)
        }
            for(var j=0;j<=4;j++){
                //console.log(imgwidth[j].index);
            imgwidth[j].index=j;
            oli[j].index=j;
            oli[j].onmouseover=function() {
                this.style.cssText = "background:#ff6700;color:#fff;"
                this.onmouseout = function () {
                    this.style.cssText = "background:none;color:#000;"
                }
            }
            oli[j].onclick=function(){
                clearInterval(time);
                m=this.index;
                slid.style.left=-m*1226+"px";
                i=m;
                auto();
                console.log(i);
            }
            }
    </script>
</html>