96编辑器旗下产品
找图
终身
ID：0
到期时间：永久
我的作品
创建作品
我的订单
我的会员
账号设置
退出登录
点击添加到桌面
热门搜索
您的位置：首页 > 百科管理 > 详情

bootstrap轮播图模板大全网站-如何用Bootstrap制作轮播图

原创：找图网 2023-04-30 04:39:07

  • 如何用Bootstrap制作轮播图

    • Bootstrap是Twitter推出的一个用于前端开发的开源工具包,并没有制作任何前端页面的功能。

    如果要实现轮播可以通过一下代码实现:

    <style type="text/css">

    * { padding: 0; margin: 0; list-style-type: none; }

    body { background-color: #222222 }

    a, img { border: 0; }

    body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }

    /* demo */

    /*五张图片在缩略图时所显示的位置调整*/

    #demo li:nth-of-type(1) img { transform: translate(-210px); }

    #demo li:nth-of-type(2) img { transform: translate(-180px); }

    #demo li:nth-of-type(3) img { transform: translate(-380px); }

    #demo li:nth-of-type(4) img { transform: translate(-450px); }

    #demo li:nth-of-type(5) img { transform: translate(-320px); }

    #demo { width: 1160px; height: 512px; margin: 60px auto 0 auto; }

    #demo img { width: 820px; height: 512px; max-width: 820px; }

    #demo li { float: left; position: relative; width: 82px; height: 100%; overflow: hidden; cursor: pointer; transition: 0.5s; transform-origin: bottom; filter: alpha(opacity=50); opacity: 0.5; }

    #demo li img { transition: 1.2s; }

    #demo li a { display: block; }

    #demo li div { position: absolute; bottom: 0; left: 0; width: 100%; background: #000; line-height: 32px; filter: alpha(opacity=70); opacity: 0.7; text-indent: 2em; }

    #demo li div a { color: #FFF; text-decoration: none; }

    #demo li div a:hover { color: #F00; text-decoration: none; }

    #demo  { cursor: pointer; transform: scale(1.02, 1.08); z-index: 3; width: 820px; filter: alpha(opacity=100); opacity: 1; }

    #demo  img { transform: translate(0px); }

    #demo li:nth-of-type(1) { transform-origin: bottom left; }

    #demo li:nth-of-type(5) { transform-origin: bottom right; }

    </style>

    <script src="js/jquery-1.8.2."></script>

    <script type="text/javascript" src="js/"></script>

    <script language="javascript">

    $(document).ready(function(e){

      var opt = {

    "speed" : "fast" , //变换速度,三速度可选 slow,normal,fast;

    "by" : "mouseover" , //触发事件,click或者mouseover;

    "auto" : true , //是否自动播放;

    "sec" : 3000   //自动播放间隔;

      };

          $("#demo").IMGDEMO(opt);    

    });

    </script>

    </head>

    <body>

    <ul id="demo">

      <li class="active"> <a href="#"><img src="images/1.png"  /></a>

        <div><a href="#">Picture information1</a></div>

      </li>

      <li> <a href="#"><img src="images/2.png"  /></a>

        <div><a href="#">Picture information2</a></div>

      </li>

      <li> <a href="#"><img src="images/3.png"  /></a>

        <div><a href="#">Picture information3</a></div>

      </li>

      <li> <a href="#"><img src="images/4.png"  /></a>

        <div><a href="#">Picture information4</a></div>

      </li>

      <li> <a href="#"><img src="images/5.png"  /></a>

        <div><a href="#">Picture information5</a></div>

      </li>

    </ul>

    </div>

    </body>

    </html>

    本案例使用的是jQuery,需要与jquery-1.8.2.min的jQuery库!

  • 如何用Bootstrap制作轮播图

    • 工具/材料

    Sublime Text

    01

    首先我们需要新建一个HTML5的文档,然后在文档中导入Bootstrap的样式文件,这个文件中包含了轮播图所有的样式定义,如下图所示

    02

    接下来我们需要导入脚本文件,注意先导入Jquery文件,然后导入bootstrap的脚本文件,顺序一定不能颠倒,如下图所示

    03

    然后在body标签里定义轮播图的容器,容器的大小需要和图片的大小一样,否则会出现轮播图错位,效果如下图所示

    04

    接下来我们就正式的添加轮播图了,这里先添加三张图,如下图所示,注意让哪种轮播图显示直接调用Bootstrap的active样式即可

    05

    轮播图片添加完毕以后,就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点,注意焦点的数量和图片的数量要一样,如下图所示

    06

    轮播图中还有一个必不可少的元素就是左右箭头,通过Bootstrap的carousel-control样式添加轮播图箭头,如下图所示

    07

    最后我们运行程序以后,在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了,如下图所示

  • 如何用Bootstrap制作轮播图

    • <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="

    " rel="stylesheet">

    <script src="

    "></script>

    <script src="

    "></script>

    <style type="text/css">

    img{

    margin:0 auto;

    }

    </style>

    </head>

    <body>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img src="

    " height="266" width="800" alt="...">

    <div class="carousel-caption">

    ...

    </div>

    </div>

    <div class="item">

    <img src="

    " height="266" width="800" alt="...">

    <div class="carousel-caption">

    ...

    </div>

    </div>

    <div class="item">

    <img src="

    " height="266" width="800" alt="...">

    <div class="carousel-caption">

    ...

    </div>

    </div>

    ...

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

    </a>

    </div>

    </body>

    </html>

    最新文章 更多
    最新素材 更多
    公司介绍 网站地图 图片资讯
    Copyright © 2010-2022 山东找图网络科技有限公司  鲁ICP备18007836号-3  邮箱：15653358549@163.com