专栏首页有趣的djangoDjango打造大型企业官网(四)

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

};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django+Bootstrap+Mysql 搭建个人博客(一)

    zhang_derek
  • Django+xadmin打造在线教育平台(七)

    代码 github下载 十、授课教师  10.1.讲师列表页 拷贝teacher-list.html和teacher-detail.html到template...

    zhang_derek
  • 博客园美化大全

    zhang_derek
  • 多种方法爬取猫眼电影并分析(附代码)

    摘要: 作为小白,爬虫可以说是入门python最快和最容易获得成就感的途径。因为初级爬虫的套路相对固定,常见的方法只有几种,比较好上手。选取网页结构较为简单的猫...

    Python中文社区
  • css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

    xing.org1^
  • vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。

    小周sri的码农
  • Django项目Mysql添加索引

    在Django数据库访问优化中一开始的时候就有提到Django有一个Field.db_index的字段,用来帮你建立表索引,这在初始化数据库时是有效的。数据库建...

    the5fire
  • Apache Hive Index

    DataScience
  • [Oracle]-[recyclebin][索引]-回收站恢复的索引名称修改

    从回收站中恢复表后,索引也会自动恢复,但索引的名称仍是回收站中的26位标识,不会改为原始名字,可以使用alter index修改索引名,但需要注意的是因为标识中...

    bisal
  • JavaScript 手风琴效果

    我们之前在 JavaScript 鼠标滑动,图片显示隐藏 这篇博文中实现了一个简化版的手风琴效果,简而言之,手风琴效果能够帮助你,在有限的页面空间内,展示多个内...

    Nian糕

扫码关注云+社区

领取腾讯云代金券