Question

我想动态制作轮播。这是我的HTML代码

<div id="mycarousel">
</div>

在javascript中我正在这样做;

var data='';
data='<div id="relatedItemCarousel"  class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000"  >';
        data=data+'<div class="carousel-inner" id="relatedItemCraousel1">'; 
//caraousel content
data='</div>'
data=data+'<a class="left carousel-control" id="related-item-carousel-control-left" href="#relatedItemCarousel" role="button" data-slide="prev" >'+
        '<i class="ion-ios-arrow-back size-32" ></i></a>'+            
    '<a class="right carousel-control" id="related-item-carousel-control-right" href="#relatedItemCaraousel" role="button" data-slide="next" >'+
        '<i class="ion-ios-arrow-forward size-32" ></i>'+
    '</a></div>';
  $('#mycarousel').html(data);

但它没有在页面上显示任何内容。我需要再次刷新旋转木马吗？

Answer 1

$('mycarousel').html(data);应为$('#mycarousel').html(data);。

#是jQuery中的id选择器。

Answer 2

好吧，我们假设我们有一系列图像：

首先，我们需要创建一个空容器，动态插入幻灯片。

将以下HTML代码添加到conatiner，以便将其附加到此处。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

在上面的html代码中需要了解的要点：

类旋转木马内部是空的，你可以在那里放置你的旋转木马的图像。

类轮播指示器也是空的，将由JS填充。

在JavaScript代码下添加html代码插入后

$(document).ready(function(){  
  for(var i=0 ; i< imageCollection.length ; i++) {
    $('<div class="item"><img src="'+imageCollection[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')

  }
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel-example-generic').carousel();
});

在上面的代码 imageCollection 基本上是您想要在轮播面板中显示的图片网址的集合。

基本上，您将所有图像附加到类carousel-inner，添加轮播控件li，然后将活动类添加到第一个图像和第一个轮播指示符li。，最后，您初始化你的旋转木马。

注意所有这些都在文档就绪函数中，但您可以随意使用。

希望这会对你有所帮助:)。

Answer 3

好吧，Bootstrap Carousel有各种控制参数。

即

间隔：指定每张幻灯片之间的延迟（以毫秒为单位）。

暂停：当鼠标指针进入旋转木马时，暂停旋转木马通过下一张幻灯片，并在鼠标指针离开旋转木马时恢复滑动。

wrap：指定轮播是否应连续浏览所有幻灯片，或在最后一张幻灯片处停止

供您参考：

更多详情，请click here...

希望这会对你有所帮助:)。

注意：这是为了进一步的帮助..我的意思是如何在加载轮播后自定义或更改默认行为。

Answer 4

我正在研究同样的问题，想出了这种kludgy解决方案。

Javascript：

function carouselMaker(myCarouselName, picArray){

<!-------------------- carousel indicators -------------------->
  var indicatorInnerHtml= "";
  for(var i=0 ; i< picArray.length ; i++) 
  {
      if(i==0){
        indicatorInnerHtml += "<li data-target=\"#"+myCarouselName+"\" data-slide-to=\"" + i +"\" class=\"active\"> </li>"; 
      }
      else{
        indicatorInnerHtml += "<li data-target=\"#"+myCarouselName+"\" data-slide-to=\"" + i +"\" class=\"\"> </li>"; 
      }       
  }  
  var indicatorsHtml = "<ol class=\"carousel-indicators\">" + indicatorInnerHtml + " </ol>";

<!---------------- carousel-inner --------------------------->
  var slidesInnerHtml = "";
  for(var i=0 ; i< picArray.length ; i++) 
  { 
      if(i==0){
        slidesInnerHtml += "<div class=\"item active\"><img src=\"" + picArray[i] + "\"><div class=\"carousel-caption\"></div>  </div>";
      }
      else{
        slidesInnerHtml += "<div class=\"item\"><img src=\"" + picArray[i] + "\"><div class=\"carousel-caption\"></div> </div>"; 
      }
  }  
  var slidesHtml = "<div class=\"carousel-inner\">" + slidesInnerHtml + "</div>";


<!---------------- carousel controls ----------------------->  
  var controlsHtml=  "" +
  "<a class=\"left carousel-control\" href=\"#" + myCarouselName + "\" data-slide=\"prev\">" + 
  "     <span class=\"glyphicon glyphicon-chevron-left\"></span>" +
  "</a> " +

   "<a class=\"right carousel-control\" href=\"#" + myCarouselName + "\" data-slide=\"next\">" +
   "    <span class=\"glyphicon glyphicon-chevron-right\"></span>" +
   " </a> ";   

  var innerCarousel = indicatorsHtml + slidesHtml + controlsHtml;

  document.getElementById(myCarouselName).innerHTML = innerCarousel;      
}

当我想在页面的某处插入轮播时，我会在PHP页面上执行此操作：

<?php
$carouselName = "testCarousel";
$carouselPicList = "\"".$pictureTwo."\" , \"".$pictureThree."\" , \"".$pictureFour."\"";
?>

<div  id="<?php echo $carouselName ?>"  class="carousel slide" data-ride="carousel">

    <script type="text/javascript">
        carouselMaker("<?php echo $carouselName ?>", [<?php echo $carouselPicList ?>]);
    </script>

</div>

$pictureNumber是我的图片所在的路径，即$pictureOne = "img/firstImage.jpg"; 这样做的好处是能够在同一页面上创建多个轮播 - 这是我在其他任何例子中都找不到的。

不禁觉得代码有点笨拙，所以如果有人有任何建议我会很高兴听到它们。

如何动态创建bootstarp轮播？

4 个答案: