引导程序导航不工作，箭头显示但没有操作
Bootstrap navigation not working in arrows show but no action
我有一个php，看起来像这个
<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";
echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";
$subfolder = $_POST["category"];
$text = $_POST["category_text"];
if ($subfolder == "0"){
echo("Please <a href='gallery.html'>go back</a> and select a category");
echo "</div><br><br>";
echo "<footer>";
echo "<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>";
echo "</footer>";
echo "</div>";
exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array
//get array using array_push
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
$folder = pathinfo($folder);
array_push($categories, $folder["filename"]);
}
//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
if ($subfolder == $categories[$i]){
if (intval($countarray[$i]) == 0) {
echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
}
else
{
echo "<h3>Here are the images for the " .$text. " category</h3>";
echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
}
}
}
$folder = "images/".$subfolder."/";
// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
// <!-- Carousel items -->
foreach($images as $image) {
$count++;
if ( $count == 1 ){ $class = 'active ';}
else{ $class='';}
echo'<div class="carousel-inner">';
echo"<div class='".$class."item'>";
echo "<img src='".$folder.$image. "'</img></div>";
echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
<li class="active"><a href="#1">•</a></li>
<li><a href="#2">•</a></li>
<li><a href="#3">•</a></li>
</ol>';
echo"<br><br>";
echo "<p> </p><a href='gallery.html'>Reselect</a>";
echo "</div>";
echo "<footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer>";
echo "</div>";
echo "</body></html>";
?>
正如您所看到的，其中包括bootstrap（min），以及css和jquery 11.3的组合。bootstrapgallery.js是我从小提琴中获得的一个函数
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
我这里有正在测试的链接。第一个图像显示，但箭头和按钮都不起作用。我觉得我一定错过了一些显而易见的东西，但代码和我的小提琴一样，所以我不明白！
救命！谢谢：）圣诞快乐
编辑：
这是我的资料来源：
<!doctype html>
<html><head><meta charset='utf-8'>
<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>
<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div><ol class="carousel-linked-nav pagination">
<li class="active"><a href="#1">•</a></li>
<li><a href="#2">•</a></li>
<li><a href="#3">•</a></li>
</ol><br><br><p> </p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer></div></body></html>
您的HTML结构应该如下所示，但您有一个carousel-inner类来包装HTML循环中的每个项目，而不是。
应该是这样的：
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="" alt=""/>
</div>
<div class="item">
<img src="" alt=""/>
</div>
</div>
</div>
你的是这样的：
<div id="myCarousel" class="carousel slide">
<div class="item">
<img src="" <="" img="">
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
</div>
相关文章：
- 操作javascript变量[HTML]以只显示文本
- 显示引导弹出操作异常的逻辑
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作）Else(显示forea
- React.js中显示了模态时如何执行某些操作
- 向上滑动操作后，字体真棒图标不显示
- 突出显示与perl正则表达式匹配的HTML部分 - 在服务器端perl或客户端javascript中执行此操作
- 如何在用户到达iframe分区末尾时显示操作按钮
- jqueryajax帖子将我发送到操作页面，并且不会显示结果数据
- 如何使用复选框显示表单的更多选项并更改表单的操作属性
- 验证码失败显示警报，但表单自动提交如何停止此操作
- 替换“单击时”操作以显示内联输出
- 执行命令链接的操作并显示对话框
- 未显示 Chrome 扩展程序浏览器操作
- 如何同时显示模式和执行操作
- 在酒窝中显示之前操作数据
- 如何通过MVC操作方法显示/隐藏HTML按钮
- 在提交之前操作表单值而不向用户显示
- 如何在操作栏中显示应用图标
- jQueryUI按钮显示操作的子菜单
- 对象属性的可视显示 - 操作方法
