您的位置：首页 > Web前端 > BootStrap

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

2016-12-09 15:52 495 查看

这里需要的是 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 类似的还有么?

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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