轮训播放

原创 2015年11月20日 10:51:51

1.在页面中添加如下代码 :

<div id="myCarousel" class="carousel slide">
    <!-- 轮播(Carousel)指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
        <div class="item bk active" id="bk1">

            <div class="carousel-caption bannerContent">
                <h1>车贷申请  轻松便捷</h1>
                <h2>不出门在家也能申请车贷</h2>
                <p>
                    <a class="btn btn-default" href="#" role="button">立即体验 
                       <span class="glyphicon glyphicon-triangle-right"></span></a>
                </p>
            </div>
        </div>

        <div class="item bk" id="bk1">
            <img src="../static/images/login/busscorp.png">
            <div class="carousel-caption bannerContent">
                <h1>XXXX公司</h1>
                <h2>优秀的理财专家</h2>
                <p>
                    <a class="btn btn-default" href="#" role="button">汽车金融业务</a>
                    <a class="btn btn-default" href="#" role="button">公司金融业务</a>
                </p>
            </div>
        </div>

        <div class="item bk" id="bk1">
            <div class="carousel-caption bannerContent">
                <h1>XXXXXXXXXXX公司</h1>
                <h2>值得信赖的金融合作伙伴</h2>
                <p>
                    <a class="btn btn-default" href="#" role="button">立即联系</a>
                </p>
            </div>
        </div>

        <div class="item bk" id="bk1">

            <div class="carousel-caption bannerContent">
                <h1>XXXXXX</h1>
                <h2>值得信赖的金融合作伙伴</h2>
                <p>
                    <a class="btn btn-default" href="#" role="button">立即联系</a>
                </p>
            </div>
        </div>
    </div>
</div>

2.添加js调用

$(function(){
    $('#myCarousel').carousel({
        interval: 2000
    })});

3.引入jquery和bootstrap两个js文件

4.样式定义,页面添加如下样式

#bk1{
    /*background-image: url(../images/login/banner7.png);*/
    background-color: red;
}

#bk2{
    background-image: url(../images/login/banner10.png);
}

#bk3{
    background-image: url(../images/login/banner11.png);
}

#bk4{
    background-image: url(../images/login/banner12.png);
}

.bk {
    width: 100%;
    height: 450px;
    position: absolute;
    background-position: center;
}

.bk img{
    position: relative;
    left: 33%;
    top: 33px;
}

.bannerContent{
    top: 50px;
    left: -600px;
    float: left;
}

运行效果:



版权声明:本文为博主原创文章,未经博主允许不得转载。

轮训、长轮训、长连接

轮询:客户端定时向服务器发送请求,服务器接到请求后马上返回响应信息并关闭连接。 优点:后端程序编写比较容易。 缺点:请求中有大半是无用,浪费带宽和服务器资源。 长轮询:客户端向服务器发送请求...
  • hohojiang
  • hohojiang
  • 2017年10月30日 15:26
  • 184

UART0串口编程系列(一)之轮训方式

本文章针对的是ARM2200环境下编写串口程序,其中设计轮循方式,中断方式,以及在UC/OS-II操作系统下的串口编程。 使用轮循和中断两种方式来实现串口编程。 (当然了,用中断实现串口编程,系统...
  • lifan_3a
  • lifan_3a
  • 2014年10月21日 15:03
  • 417

android 自动播放Banner

先看一下效果图支持本地图片以及网络图片or本地网络混合。使用方式:
  • a940659387
  • a940659387
  • 2016年01月15日 10:57
  • 1365

TeamTalk--消息服务器的轮训

先看如下几个函数。 void CMsgConn::OnConnect(net_handle_t handle) {      m_handle = handle;      m_login_tim...
  • evsqiezi
  • evsqiezi
  • 2015年03月18日 10:54
  • 2093

比sleep精确的时间轮训

interval=5 sleep_time =(date + %s.%N) | awk "{print interval- (\$1 % interval)}"); usleep(sleep_ti...
  • w87510255
  • w87510255
  • 2017年03月12日 11:04
  • 89

Linux下logrotate日志轮询操作梳理

对于Linux系统安全来说,日志文件是极其重要的工具。不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相发明自己的轮...
  • u013896457
  • u013896457
  • 2017年09月14日 21:57
  • 340

flex 轮询通道配置的解释

2010-10-25 14:49:47|  分类: flex|字号 订阅       http://{server.name}:{server.port}/{cont...
  • zishan007
  • zishan007
  • 2013年05月15日 13:15
  • 602

AJAX实现防止Session过期

利用前端Ajax过段时间加载一次后台防止Session过期 前台代码                     $(function () {             function pos...
  • zhs954838550
  • zhs954838550
  • 2013年07月02日 15:49
  • 529

pandas的数据结构之DataFrame

DataFrame是一个表格型的数据结构,它含有一组有序的列,每列可以是不同数据类型的数据。DataFrame既有行索引也有列索引,可以将它看作为一个由Series组成的字典(共用同一个索引)。Dat...
  • sinat_29957455
  • sinat_29957455
  • 2018年01月02日 21:42
  • 60

多台服务器轮训日志合并

 多台服务日志合并问题:把多个日志中的记录按时间排序后合并成一个文件典型的多个日志文件的时间字段是这样的:log1 log2 log300:15:00 00:14:00 00:11:0000:16:0...
  • kaka_sun
  • kaka_sun
  • 2008年12月11日 17:43
  • 535
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:轮训播放
举报原因:
原因补充:

(最多只允许输入30个字)