zoukankan      html  css  js  c++  java
  • 轮播图

    一,实现轮播图

      1)引入boootstrap

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    二,引入轮播图效果

    <div id="div_head3">
    <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>
        </ol>   
        <!-- 轮播(Carousel)项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="${pageContext.request.contextPath}/img/bdr3.jpg" alt="First slide" id="img1">
            </div>
            <div class="item">
                <img src="${pageContext.request.contextPath}/img/bdr2.jpg" alt="Second slide" id="img2">
            </div>
            <div class="item">
                <img src="${pageContext.request.contextPath}/img/bdr1.jpg" alt="Third slide" id="img3">
            </div>
        </div>
        <!-- 轮播(Carousel)导航 -->
        <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" 
            data-slide="next">&rsaquo;</a>
    </div> 
    </div>

    三,设置图片大小样式,保证轮播图宽高正常 

            #img1{
                    height: 459px;
                     100%;
                }
                #img2{
                    height: 459px;
                     100%;
                }
                #img3{
                    height: 459px;
                     100%;
                }


          <script>
          $(function(){
          $("#myCarousel").carousel({
          interval: 2000, //轮播时间间隔
          pause:'string'
            });
          });
          </script>

    
    

  • 相关阅读:
    B0BO TFS 安装指南(转载)
    Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
    huhamhire-hosts — Hosts文件自动配置工具
    JFinal tomcat配置根路径(包括windows和linux)
    JSON 之FastJson解析
    JFinal使用笔记1-部署demo项目到本地tomcat
    HDU 4891 The Great Pan
    FragmentActivity+FragmentTabHost+Fragement替代TabActibvity+TabHost+Activity
    HIT 2255 Not Fibonacci(矩阵高速幂)
    STM32学习之路-感觉自己走到了一个天大的坑里了!
  • 原文地址:https://www.cnblogs.com/hi-feng/p/8021778.html
Copyright © 2011-2022 走看看