轮播图

Posted 2020-10-17 言_曦

一，实现轮播图

　　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;
                width: 100%;
            }
            #img2{
                height: 459px;
                width: 100%;
            }
            #img3{
                height: 459px;
                width: 100%;
            }

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