将Carousel项“active”返回到变量

时间：2014-12-01 05:43:53

标签： jquery return carousel 

  $('.carousel').carousel({
        interval: 5000,
        pause: "hover",
    });
    
    
    $("#nxt").on("click",function(e){
      e.preventDefault();
    $("#ImVwr").carousel("next")
});    
    $("#prv").on("click",function(e){
      e.preventDefault();
    $("#ImVwr").carousel("prev");
});
    
    
for (var i = 0; i < 12; i++){
  var ff = function(x){
    return function(e){
      e.preventDefault();
      $("#ImVwr").carousel(x);

    }
  }
  $("#i0" + i.toString()).on("click",ff(i));
}

$(document).ready(function(){

  $("#hi").click(function(){
    $("#car02").show();
    $("#car01").hide();
  });
  $("#bye").click(function(){
    $("#car01").show();
    $("#car02").hide();
  });

  $("#no").click(function(){
    $("stripb").stop();
  });

});
.icons {
  font-size:20px;
  color:#ddd;
  padding: 2px;
  text-shadow:0 -1px 0px rgba(1,1,1,0.4);
}

.drop-shadow {
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
    border-radius:5px;
}

.mini-drpshdw {
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, .3);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .3);
    border-radius:3px;
}



img.cla {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    border: 1px solid #999;
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.stroke {
 color: #fff;
 -webkit-text-stroke: 1px #000;
/* opacity: 0.5;*/
}
.stroke-transparent {
 -webkit-text-stroke: 1px #000;
 -webkit-text-fill-color: transparent;
}
    .big {
    font-size: 30px
}
.carousel {
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    ...
}/*display: none;*/
  .carousel-nab{
  top:0px;
  position: absolute;
  bottom: 0px;
  left: 15%;
  z-index: 10;
  width: 60%;
  padding-left: 0;
  margin-left: 0%;
  text-align: center;
  list-style: none;
 /* font-style: italic;*/
  font-weight: bold;
  font-size: 15px;
  color:#ddd;
  text-shadow:0 1px 1px rgba(1,1,1,0.9);
}

  .carousel-ban {
  position: absolute;
  right: 0%;
  bottom: 0px;
  left: 0%;
  z-index: 10;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #000;
 filter: alpha(opacity=70);
  opacity: .7;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-weight: bold;
  color:#fff

}



.carousel .carousel-ban { visibility: hidden; }
.carousel:hover .carousel-ban { visibility: visible; }
.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; }

.item.next .carousel-ban {
    opacity: 0;
}
.carousel-ban {
  transition: opacity .25s linear ;
  -moz-transition: opacity .25s linear ;
  -webkit-transition: opacity .25s linear ;
}
 .stripa {
  text-align: center;

 }
  .stripb {
  display:none;
  text-align: center;
 }
<!DOCTYPE html>

<html>

   <head>

   	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="//d2c5utp5fpfikz.cloudfront.net/3_1_1/css/bootstrap.min.css" rel="stylesheet">
     <link href="//d2c5utp5fpfikz.cloudfront.net/3_1_1/css/bootstrap.css.map" rel="stylesheet">
     <script src="//d2c5utp5fpfikz.cloudfront.net/3_1_1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
     </style>

      <title>doubleStrip carousel</title>
<br><br>
   </head>
   <body>
 

   	<div class="container">

      <div class="row">
       <div class="col-md-4"></div>
       <div class="col-md-4">
      <button id="hi">show</button>
      <button id="bye">hide</button>
      
       </div>
       <div class="col-md-4"></div>
     </div>


      <div class=" row">
        <div class=" col-md-2"></div>

        <div class="col-md-8">
          <div id="contenedor">     

          <div id="ImVwr" class="carousel slide drop-shadow">
             

            <div class=" carousel-inner"> 

              <div class="item active">
                <img src="http://placehold.it/600&text=oneCat!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md">
                  <h4>Title</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.osam laborum dolorum?<p>
                </div>
                <div class="carousel-nab ">Este es un texto claro</div>
              </div>

              <div class="item ">
                <img  src="http://placehold.it/600&text=twoCat!" alt="">
                <div id="fdon"class="carousel-ban clearfix visible-lg visible-md ">                  
                  <div> <h4 >Title</h4> <p id="fdon2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.osam laborum dolorum?</p></div>
                </div>
                <div class="carousel-nab ">no debe ser problema</div>
              </div>

              <div class="item">
                <img src="http://placehold.it/600&text=threeCat!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. similique rerum error!</p>
                </div>
                <div class="carousel-nab ">se lee sin inconvenientes</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=fourCat!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Caption clara y comprensible</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=fiveCat!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Tiene un caption visible</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=sixDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Leo mi caption con tranquilidad</div>
              </div>
<!-- ........................................................................................................ -->
              <div class="item ">
                <img src="http://placehold.it/600&text=sevenDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md">
                  <h4>Title</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.osam laborum dolorum?<p>
                </div>
                <div class="carousel-nab ">Este es un texto claro</div>
              </div>

              <div class="item ">
                <img  src="http://placehold.it/600&text=eightDog!" alt="">
                <div id="fdon"class="carousel-ban clearfix visible-lg visible-md ">                  
                  <div> <h4 >Title</h4> <p id="fdon2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.osam laborum dolorum?</p></div>
                </div>
                <div class="carousel-nab ">no debe ser problema</div>
              </div>

              <div class="item">
                <img src="http://placehold.it/600&text=nineDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. similique rerum error!</p>
                </div>
                <div class="carousel-nab ">se lee sin inconvenientes</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=tenDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Caption clara y comprensible</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=elevenDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Tiene un caption visible</div>
              </div>

              <div class="item ">
                <img src="http://placehold.it/600&text=twelveDog!" alt="">
                <div class="carousel-ban clearfix visible-lg visible-md ">
                  <h4 >Title</h4>
                  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorum quod omnis odit deserunt aliquam commodi?</p>
                </div>
                <div class="carousel-nab ">Leo mi caption con tranquilidad</div>
              </div>
<!-- ........................................................................................................ -->
            </div>

              <a class="carousel-control left" href="#ImVwr" data-slide="prev">
               <span class="glyphicon glyphicon-chevron-left"></span>

             </a>
              <a class="carousel-control right" href="#ImVwr" data-slide="next">
               <span class="glyphicon glyphicon-chevron-right"></span>
             </a>
          </div>
       
        </div> 

        </div> 

        <div class="col-md-2"></div>
      </div>
 
<br><br>

      <div class="row">
        <div class=" col-md-2"></div>

        <div class=" text-center col-md-8 clearfix visible-lg visible-md ">
         
         <div id="car01" class=" stripa">
           <a href="#" id="prv"><i class="glyphicon glyphicon-circle-arrow-left icons mini-drpshdw"></i></a>
           <a href="#" id="i00"><img src="http://placehold.it/80x60&text=0cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i01"><img src="http://placehold.it/80x60&text=1cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i02"><img src="http://placehold.it/80x60&text=2cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i03"><img src="http://placehold.it/80x60&text=3cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i04"><img src="http://placehold.it/80x60&text=4cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i05"><img src="http://placehold.it/80x60&text=5cat" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="nxt"><i class="glyphicon glyphicon-circle-arrow-right icons mini-drpshdw"></i></a>

        </div>  

      </div>

        <div class=" col-md-2"></div>
      </div>

      <div class="row">
        <div class=" col-md-2"></div>

        <div class=" text-center col-md-8 clearfix visible-lg visible-md ">
         
          <div id="car02" class=" stripb">         
           <a href="#" id="prv"><i class="glyphicon glyphicon-circle-arrow-left icons mini-drpshdw"></i></a>
           <a href="#" id="i06"><img src="http://placehold.it/80x60&text=6dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i07"><img src="http://placehold.it/80x60&text=7dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i08"><img src="http://placehold.it/80x60&text=8dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i09"><img src="http://placehold.it/80x60&text=9dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i010"><img src="http://placehold.it/80x60&text=10dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="i011"><img src="http://placehold.it/80x60&text=11dog" alt="#" class="img-rounded cla mini-drpshdw "></a>
           <a href="#" id="nxt"><i class="glyphicon glyphicon-circle-arrow-right icons mini-drpshdw"></i></a>

        </div>  

      </div>

        <div class=" col-md-2"></div>
      </div>


    

   </div> <!-- ndcnt -->

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

我做了12个元素的旋转木马。我有两条带有6个元素的缩略图。 名称为id：“＃car01”和“＃car02”。

我在前6张幻灯片的缩略图条之间切换到6秒钟，顶部的节目点击按钮并隐藏

 $("#first").click(function(){
    $("#car02").show();
    $("#car01").hide();
  });
  $("#second").click(function(){
    $("#car01").show();
    $("#car02").hide();
  });

这很好，但是......

我已将所有图像放在同一个容器类“carousel-inner”上，因为这样我就可以显示所有图像列表。当幻灯片显示第二部分的第一张幻灯片时，缩略图条6的幻灯片应从“＃car01”换成“＃car02” 但我无法想象如何做到这一点。

我试过了：

  if($("#mycarousel").carousel(6).children('.item').hasClass('active')) {
    $("#car02").show();
    $("#car01").hide();
}

不要工作

  if($("#ImVwr").carousel(6).children('.item')) == (.hasClass.contains('active')) {
$("#car02").show();
$("#car01").hide();

}

不起作用

我在网上找不到任何线索，也没有在stackoverflow上找到任何线索。

jsfiddle 为了进一步澄清，我做了this video capture。前6张幻灯片Pepe le pew＆amp;佩内洛普。第二次6拉德马克安东尼和Pussyfoot。 （在代码片段中，我只为每个幻灯片组使用了数字和CAT DOG。）

当新列表（DOG）中的第一项处于活动状态时，无法自动切换。 ATM我正在寻找一种使用Carousel.item的好方法。“主动”作为变量。

2 个答案:

答案 0 :(得分：0)

this

怎么样？

我为slid.bs.carousel事件分配了一个事件处理程序。代码如下所述

$('.carousel').carousel({
    interval: 5000,
    pause: "hover",
}).on('slid.bs.carousel', function (e) {
    var a = $('.carousel-inner .item');
    a.splice(0, 6);
    if (!a.hasClass('active')) $("#bye").trigger('click');
    else $("#hi").trigger('click');
})

答案 1 :(得分：0)

Cerlin Boss为你找到了解决方案，但你还有一点问题。

car02的左箭头和右箭头不起作用，这是因为您需要为每个car00添加next和prev事件，在本例中为car01和car02。

您必须修改此内容：

$("#nxt").on("click", function (e) {
    e.preventDefault();
    $("#ImVwr").carousel("next")
});
$("#prv").on("click", function (e) {
    e.preventDefault();
    $("#ImVwr").carousel("prev");
});

到此：

for(var i = 1; i <= 2; i++)
{
    $("#car0" + i).find("#nxt").on("click", function (e) {
        e.preventDefault();
        $("#ImVwr").carousel("next");
    });

    $("#car0" + i).find("#prv").on("click", function (e) {
        e.preventDefault();
        $("#ImVwr").carousel("prev");
    });
}

最终代码：http://jsfiddle.net/1pqpb1n5/10/

相关问题
最新问题