简单的 bootstrap 做的图片轮播还有些牵强不成熟请大家多指导

最新推荐文章于 2021-07-07 16:28:28 发布

stayingAlone

最新推荐文章于 2021-07-07 16:28:28 发布

阅读量673

点赞数

文章标签： bootstrap 图片轮播带缩略图

本文链接：https://blog.csdn.net/stayingAlone/article/details/53540092

版权

这里需要的是 jquery.2.1.1.min.js

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title></title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" style="width: 1000px; height: 454px; margin-top: 150px;" >
   
   <div class="carousel-indicators" style="height:70px;width: 1000px; background-color:rgba(15,15,15,0.3);" >

       
           <div align="left" style="float: left; margin-top:10px; margin-left:20px; width: 200px; background-color:rgba(15,15,15,0); "   >
               <b><font id="ph" color="#c0bab9" size="3" >东方project</font></b><br>
               <font id="pc" color="#c0bab9" >哈哈哈</font>
           </div>


       <div id="carousel-selector-3" style="float: right; margin-right: 30px; margin-top:10px; width: 100px; height: 50px; " data-target="#myCarousel" data-slide-to="3">
           <img src="/test/lunbo/288193.jpg" width="100" height="50" >
       </div>
       <div id="carousel-selector-2" style="float: right; margin-right: 30px; margin-top:10px; width: 100px; height: 50px; " data-target="#myCarousel" data-slide-to="2">
           <img src="/test/lunbo/289217.jpg" width="100" height="50" >
       </div>
       <div id="carousel-selector-1" style="float: right; margin-right: 30px; margin-top:10px; width: 100px; height: 50px; " data-target="#myCarousel" data-slide-to="1">
           <img src="/test/lunbo/289558.jpg" width="100" height="50" >
       </div>
       <div id="carousel-selector-0" style="float: right; margin-right: 30px; margin-top:10px; width: 100px; height: 50px; " data-target="#myCarousel" data-slide-to="0" class="active">
           <img src="/test/lunbo/295613.jpg" width="100" height="50" >
       </div>

   </div>
   

   
   <div style="margin-left: 200px; " class="carousel-inner">
       <div class="item active" data-slide-number="0">
           <img src="/test/lunbo/295613.jpg" style="height: 435px; width: 1000px;" title="博丽妖梦" >
       </div>
       <div class="item" data-slide-number="1">
           <img src="/test/lunbo/289558.jpg" style="height: 435px; width: 1000px;" title="C.C">
       </div>
       <div class="item" data-slide-number="2">
           <img src="/test/lunbo/289217.jpg" style="height: 435px; width: 1000px;" title="银古">
       </div>
       <div class="item" data-slide-number="3">
           <img src="/test/lunbo/288193.jpg" style="height: 435px; width: 1000px;" title="智爷">
       </div>
   </div>
   
   

</div>
</body>

<style type="text/css">
   /* .selected{border:2px solid #3d85c6;width:104px;height:54px;}
                                   width: 100px; height: 50px; */
   .selected img {
       //opacity:0.5;
       border: 2px solid #3d85c6;
   }
</style>
<script type="text/javascript">


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

   $('#myCarousel').on('slid.bs.carousel', function () {
       var i = $('.item.active').data('slide-number');

       //id还可以这样选择呢!
       $('[id^=carousel-selector-]').removeClass('selected');
       $('[id=carousel-selector-'+i+']').addClass('selected');


       if(i==0){
           $("#ph").text("东方project");
           $("#pc").text("哈哈哈");
       }
       if(i==1){
           $("#ph").text("披萨好吃");
           $("#pc").text("geass");
       }
       if(i==2){
           $("#ph").text("muxi");
           $("#pc").text("啊");
       }
       if(i==3){
           $("#ph").text("pokemon");
           $("#pc").text("原型小红");
       }
   });

   id还可以这样选择呢!
   $('[id^=carousel-selector-]').click( function(){
          //var id_selector = $(this).attr("id");
          //var id = id_selector.substr(id_selector.length -1);
          //id = parseInt(id);
          //$('#myCarousel').carousel(id);
          //不用上面这些是因为   每个缩略图有配这个 data-slide-to="0" 直接跳到所选的图片
          $('[id^=carousel-selector-]').removeClass('selected');
          $(this).addClass('selected');
   });

</script>

</html>

现在流行的 boodstrap 类似的还有么?