Javascript 引导转盘不滑动且不显示文本
我正试图使用我在bootply上找到的这个小转盘,但我遇到了一些问题。首先,旋转木马不滑动,所以我只能看到第一个图像和幻灯片按钮不工作,第二个是照片附近的文本不可见,可能是因为显示它的javascript函数不工作 这是我的html代码:Javascript 引导转盘不滑动且不显示文本,javascript,twitter-bootstrap-3,carousel,Javascript,Twitter Bootstrap 3,Carousel,我正试图使用我在bootply上找到的这个小转盘,但我遇到了一些问题。首先,旋转木马不滑动,所以我只能看到第一个图像和幻灯片按钮不工作,第二个是照片附近的文本不可见,可能是因为显示它的javascript函数不工作 这是我的html代码: <div class="row-fluid" style="margin-top:10px; margin-left:10px;"> <div class="span9" id="slider">
<div class="row-fluid" style="margin-top:10px; margin-left:10px;">
<div class="span9" id="slider">
<!-- Top part of the slider -->
<div class="row-fluid">
<div class="span2" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><img src="http://lorempixel.com/120/100" style="border-radius:3px"></div>
<div class="item" data-slide-number="1"><img src="http://lorempixel.com/120/100/technics/1"style="border-radius:3px"></div>
<div class="item" data-slide-number="2"><img src="http://lorempixel.com/120/100/business/1"style="border-radius:3px"></div>
<div class="item" data-slide-number="3"><img src="http://lorempixel.com/120/100/city"style="border-radius:3px"></div>
<div class="item" data-slide-number="4"><img src="http://lorempixel.com/120/100/city/1"style="border-radius:3px"></div>
<div class="item" data-slide-number="5"><img src="http://lorempixel.com/120/100"style="border-radius:3px"></div>
</div>
</div>
<!-- Carousel nav -->
<div class="carousel-controls-mini">
<a href="#myCarousel" data-slide="prev">‹</a>
<a href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="span4" id="carousel-text"></div>
<div style="display:none;" id="slide-content">
<div id="slide-content-0">
<h5>Slide One</h5>
<p>This is mini slider / carousel with Bootstrap. Blah blah, blah, blah blah. Lorem dolor?</p>
<small>October 13 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-1">
<h5>Slide Two</h5>
<p>Mini carousel with Bootstrap</p>
<small>October 15 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-2">
<h5>Slider Three</h5>
<p>Facebook-style paged image slider</p>
<small>October 19 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-3">
<h5>Slider Four</h5>
<p>Lorem Ipsum Dolor</p>
<small>October 22 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-4">
<h5>Slider Five</h5>
<p>Lorem Ipsum Dolor</p>
<small>October 25 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-5">
<h5>Slider Six</h5>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div> <!--/Slider-->
javascript控制台没有返回任何错误,因此我无法理解问题所在。谢谢大家! 您的HTML文件没有检测到jQuery代码 添加以下内容:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
您的HTML文件没有检测到jQuery代码 添加以下内容:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
您的代码在JSFIDLE中运行良好,除了事件之外,它需要是“slided.bs.carousel”。看,是的,我知道它在小提琴上工作得很好,关键是在我的电脑上它不工作。我尤其感到惊讶的是,文本的javascript函数不起作用。。。它是普通的javascript$('#myCarousel')。on('slided',function(e){不是旋转木马完成滑动时触发的事件。它触发$('#myCarousel')。on('slided.bs.carousel',function(e){你的代码在JSFIDLE中运行良好,除了事件之外,它需要是'slide.bs.carousel'。看,是的,我知道它在FIDLE上运行良好,关键是在我的pc上它不工作。特别是,我很惊讶文本的javascript函数不工作……它是正常的javascript$('#myCarousel')。on('slided',function(e){不是carosel在完成滑动时触发的事件。它在('slided.bs.carousel',function(e)上触发$('myCarousel'){