zoukankan      html  css  js  c++  java
  • 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);
    
    };
     
     
     
  • 相关阅读:
    poj 1417 True Liars(并查集+背包dp)
    CodeForces 760 C. Pavel and barbecue(dfs+思维)
    poj 2912 Rochambeau(枚举+带权并查集)
    lightoj 1245 Harmonic Number (II)(简单数论)
    thinkphp __PUBLIC__的定义 __ROOT__等常量的定义
    HTML5 画布参考
    HTML5 DTD
    HTML5 音频视频
    HTML5 事件
    HTML5 标准属性 NEW:HTML 5 中新的标准属性。 注释:HTML 4.01 不再支持 accesskey 属性:
  • 原文地址:https://www.cnblogs.com/gaidy/p/12106997.html
Copyright © 2011-2022 走看看