我是jQuery的新手，我不知道如何在图像库中包含相应的按钮文本。图片库的底部还具有上一个和下一个按钮以及分页/单选按钮。理想情况下，按钮位于H3和H4元素（上方）和分页（下方）之间。
这是html：
<body>
<div class="flex-container">
<header class="header">
<!-- galleryContainer -->
<section id="galleryContainer">
<ol id="galleryPagination">
<li><a class="galleryThumb" href="images/newbooks-tb-min.jpg" title="New books">New books</a></li>
<li><a class="galleryThumb" href="images/latestnews-tb-min.jpg" title="Latest news">Latest news</a></li>
<li><a class="galleryThumb" href="images/newrecipes-tb-min.jpg" title="New recipes">New recipes</a></li>
</ol>
</section> <!-- end of galleryContainer -->
</header>
<section id="newBooks" class="row">New books</section> <!-- end of newBooks -->
<section id="latestNews" class="row">Latest news</section> <!-- end of latestNews -->
<section id="newRecipes" class="row">New recipes</section> <!-- end of newRecipes -->
</div> <!-- end of flex-container -->
<script src="js/jquery.min.js"></script>
<script src="js/kitchen.js"></script>
</body>
和jQuery：
/*
Image Gallery preferred DOM:
- div #galleryImageContainer
- img newbooks (active, z-index 10)
- img latest news (z-index 20)
- img new recipes (z-index 20)
- div #centerPiece with
- img#galleryPrev
- div#heroMessages
- h3 heading (z-index 30)
- horizontal line (z-index 30)
- h4 heading
- img#galleryNext
- div#heroButton linking to corresponding sections (see html)
-a href="#newBooks"
-a href="#latestNews"
-a href="#newRecipes"
- ol#galleryPagination
- li.active
- li
- li
*/
$(document).ready(function(){
/* ======================================================================
Initialisation
=========================================================================== */
$("#galleryPagination li").css({
'cursor' : 'pointer',
'font-size' : '0',
'width' : '1rem',
'height' : '1rem',
'padding' : '0',
'border-radius' : '50%'
});
$pagination = $("#galleryPagination").detach(); // detach the galleryPagination from the HTML-code and store in the $pagination variable
$("#galleryContainer").append('<div id="galleryImageContainer"></div>'); // append galleryImageContainer in the galleryContainer
$("#galleryContainer").append('<div id="centerPiece"></div>'); // idem for centerPiece
$("#centerPiece").append('<img id="galleryPrev" src="images/prev.svg" alt="previous image" title="Show previous image." role="button">'); // within centerPiece append the Prev button
$("#centerPiece").append('<div id="heroMessages"></div>'); // heroMessages
$("#heroMessages").append('<h3>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit!</h3>'); // h3
$("#heroMessages").append('<h4>Sed do eiusmod tempor incididunt<br>ut labore et dolore magna aliqua!</h4>'); // h4
$("#centerPiece").append('<img id="galleryNext" src="images/next.svg" alt="next image" title="Show next image." role="button">'); // Next button
$("#centerPiece").append('<div id="heroButton"></div>'); // div heroButton
$("#galleryContainer").append($pagination); // Put back the pagination as galleryContainer's last child
$("#galleryPagination li:first-child").addClass("active"); // styling of the first pagination bullet
var galleryCurrentItem = 0; // Current slide (zero based)
//var galleryCurrentBtn = 0; // Current button (zero based)
var gallerySize = $("#galleryPagination li").length; // The number of items in the gallery is set by the number of li's in the HTML
/* ======================================================================
Functions
=========================================================================== */
function changeGalleryImage($clickedObject){
if($clickedObject.attr("id") == "galleryPrev"){ // Is the prev button clicked on?
if(galleryCurrentItem == 0){ // When we see the first image?
galleryCurrentItem = gallerySize-1; // Then go to the last image.
} else { // If NOT?
galleryCurrentItem--; // Then subtract galleryCurrentItem with one.
}
} else if($clickedObject.attr("id") == "galleryNext"){ // Is the next button clicked on?
if(galleryCurrentItem == gallerySize-1){ // When we see the last image?
galleryCurrentItem = 0; // Then go to the first image.
} else { // If NOT?
galleryCurrentItem++; // Then increase galleryCurrentItem with one.
} // end of else
} // end of else if
if($("#galleryImageContainer img").eq(galleryCurrentItem).css("left") != "0px"){ // If we're NOT clicking on an image that is already on screen?
$("#galleryContainer").css("cursor", "wait"); // Include wait icon
$("#galleryPagination li").css("pointer-events", "none"); // Block click events for all li's in #galleryPagination
//set pagination
$("#galleryPagination li").removeClass("active"); // remove class active
$clickedObject.addClass("active"); // and put it on the new one
//set images (incl animation)
$("#galleryImageContainer img").css("z-index", "10"); // Put all images on z-index 10.
$("#galleryImageContainer img").eq(galleryCurrentItem).css("z-index", "20"); // The image that corresponds with the clicked pagination is given a higher z-index than the others.
$("#galleryImageContainer img").eq(galleryCurrentItem).animate({
"left" : "0px"
}, 500, function(){
// Callback: When the left animation is ready, the other images are put out of the picture.
$("#galleryImageContainer img:not(:eq(" + galleryCurrentItem + "))").css("left", "2560px");
$("#galleryContainer").css("cursor", "default");
$("#galleryPagination li").css("pointer-events", "auto");
}); // end of animation
} // end if
// Pagination should also work well with the prev and next buttons.
if($clickedObject.attr("id") == "galleryPrev" || $clickedObject.attr("id") == "galleryNext"){ // Did we click on prev or next?
$("#galleryPagination li").eq(galleryCurrentItem).addClass("active"); // Update to the correct pagination bullet.
}
} // end function changeGalleryImage
function camelize(text) {
return text.replace(/^([A-Z])|[\s-_]+(\w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
} // end function camelize text
// function changeGalleryButton?
/* ======================================================================
Gallery Set-up
=========================================================================== */
$("#galleryPagination li a").each(function(index){ // For every a-tag in the pagination
var zIndex, left, style;
if(index == 0){ // The first image is visible
zIndex = 10;
left = "0px";
} else { // The others should be placed left of the first image (out of sight due to CSS overflow:hidden
zIndex = 20;
left = "2560px";
}
style = ' style="z-index: ' + zIndex + '; left: ' + left + ';"';
$galleryImage = '<img src="' + $(this).attr("href") + '" alt="' + $(this).attr("title") + '"' + style + '>';
$("#galleryImageContainer").append($galleryImage);
$(this).parent().click(function(){ // Pagination li button event.
galleryCurrentItem = index;
changeGalleryImage($(this));
}); // End of click on li in pagination.
var $sectionText = $(this).text(); // store the button texts in var
var $sectionLink = camelize($sectionText); // change the text into camel case words, eq to the real ids in a href in html, ie newBooks etc. and put them in another var
console.log($sectionText);
$galleryBtnLink = '<a href="#' + $sectionLink + '" class="btn btn-info" role="button">' + $sectionText + '</a>';
$("#heroButton").append($galleryBtnLink); // append button incl text in the heroButton
}); // End of each of all a's of the pagination.
$("#galleryPrev").click(function(){ // Previous button event.
changeGalleryImage($(this));
});
$("#galleryNext").click(function(){ // Next button event.
changeGalleryImage($(this));
});
}); // End document.ready
因此，第一张图片应具有带有按钮“ New books”的文本，并应链接到#newBooks部分，第二张图片应具有带按钮“最新消息”的文本，并应链接至#latestNews部分，等等。每个最好再做一个？
/*
Image Gallery preferred DOM:
- div #galleryImageContainer
- img newbooks (active, z-index 10)
- img latest news (z-index 20)
- img new recipes (z-index 20)
- div #centerPiece with
- img#galleryPrev
- div#heroMessages
- h3 heading (z-index 30)
- horizontal line (z-index 30)
- h4 heading
- img#galleryNext
- div#heroButton linking to corresponding sections (see html)
-a href="#newBooks"
-a href="#latestNews"
-a href="#newRecipes"
- ol#galleryPagination
- li.active
- li
- li
*/
$(document).ready(function(){
/* ======================================================================
Initialisation
=========================================================================== */
$("#galleryPagination li").css({
'cursor' : 'pointer',
'font-size' : '0',
'width' : '1rem',
'height' : '1rem',
'padding' : '0',
'border-radius' : '50%'
});
$pagination = $("#galleryPagination").detach(); // detach the galleryPagination from the HTML-code and store in the $pagination variable
$("#galleryContainer").append('<div id="galleryImageContainer"></div>'); // append galleryImageContainer in the galleryContainer
$("#galleryContainer").append('<div id="centerPiece"></div>'); // idem for centerPiece
$("#centerPiece").append('<img id="galleryPrev" src="https://drive.google.com/open?id=1sYaSH33pTEvCM-j3_3i0WzIGW-wtnsoc" alt="previous image" title="Show previous image." role="button">'); // within centerPiece append the Prev button
$("#centerPiece").append('<div id="heroMessages"></div>'); // heroMessages
$("#heroMessages").append('<h3>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit!</h3>'); // h3
$("#heroMessages").append('<h4>Sed do eiusmod tempor<br>incididunt ut labore et dolore!</h4>'); // h4
$("#centerPiece").append('<img id="galleryNext" src="https://drive.google.com/open?id=1ZKxD5cajPE1lg8QEHonmD4CfRUdBYpIz" alt="next image" title="Show next image." role="button">'); // Next button
$("#centerPiece").append('<div id="heroButton"></div>'); // div heroButton
$("#galleryContainer").append($pagination); // Put back the pagination as galleryContainer's last child
$("#galleryPagination li:first-child").addClass("active"); // styling of the first pagination bullet
var galleryCurrentItem = 0; // Current slide (zero based)
//var galleryCurrentBtn = 0; // Current button (zero based)
var gallerySize = $("#galleryPagination li").length; // The number of items in the gallery is set by the number of li's in the HTML
/* ======================================================================
Functions
=========================================================================== */
function changeGalleryImage($clickedObject){
if($clickedObject.attr("id") == "galleryPrev"){ // Is the prev button clicked on?
if(galleryCurrentItem == 0){ // When we see the first image?
galleryCurrentItem = gallerySize-1; // Then go to the last image.
} else { // If NOT?
galleryCurrentItem--; // Then subtract galleryCurrentItem with one.
}
} else if($clickedObject.attr("id") == "galleryNext"){ // Is the next button clicked on?
if(galleryCurrentItem == gallerySize-1){ // When we see the last image?
galleryCurrentItem = 0; // Then go to the first image.
} else { // If NOT?
galleryCurrentItem++; // Then increase galleryCurrentItem with one.
} // end of else
} // end of else if
if($("#galleryImageContainer img").eq(galleryCurrentItem).css("left") != "0px"){ // If we're NOT clicking on an image that is already on screen?
$("#galleryContainer").css("cursor", "wait"); // Include wait icon
$("#galleryPagination li").css("pointer-events", "none"); // Block click events for all li's in #galleryPagination
//set pagination
$("#galleryPagination li").removeClass("active"); // remove class active
$clickedObject.addClass("active"); // and put it on the new one
//set images (incl animation)
$("#galleryImageContainer img").css("z-index", "10"); // Put all images on z-index 10.
$("#galleryImageContainer img").eq(galleryCurrentItem).css("z-index", "20"); // The image that corresponds with the clicked pagination is given a higher z-index than the others.
$("#galleryImageContainer img").eq(galleryCurrentItem).animate({
"left" : "0px"
}, 500, function(){
// Callback: When the left animation is ready, the other images are put out of the picture.
$("#galleryImageContainer img:not(:eq(" + galleryCurrentItem + "))").css("left", "2560px");
$("#galleryContainer").css("cursor", "default");
$("#galleryPagination li").css("pointer-events", "auto");
}); // end of animation
} // end if
// Pagination should also work well with the prev and next buttons.
if($clickedObject.attr("id") == "galleryPrev" || $clickedObject.attr("id") == "galleryNext"){ // Did we click on prev or next?
$("#galleryPagination li").eq(galleryCurrentItem).addClass("active"); // Update to the correct pagination bullet.
}
} // end function changeGalleryImage
function camelize(text) {
return text.replace(/^([A-Z])|[\s-_]+(\w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
} // end function camelize text
// function changeGalleryButton?
/* ======================================================================
Gallery Set-up
=========================================================================== */
$("#galleryPagination li a").each(function(index){ // For every a-tag in the pagination
var zIndex, left, style;
if(index == 0){ // The first image is visible
zIndex = 10;
left = "0px";
} else { // The others should be placed left of the first image (out of sight due to CSS overflow:hidden
zIndex = 20;
left = "2560px";
}
style = ' style="z-index: ' + zIndex + '; left: ' + left + ';"';
$galleryImage = '<img src="' + $(this).attr("href") + '" alt="' + $(this).attr("title") + '"' + style + '>';
$("#galleryImageContainer").append('<button class="showTxt">'+ $(this).attr("title") +'</button>');
$("#galleryImageContainer").append($galleryImage);
$(this).parent().click(function(){ // Pagination li button event.
galleryCurrentItem = index;
changeGalleryImage($(this));
}); // End of click on li in pagination.
var $sectionText = $(this).text(); // store the button texts in var
var $sectionLink = camelize($sectionText); // change the text into camel case words, eq to the real ids in a href in html, ie newBooks etc. and put them in another var
console.log($sectionText);
$galleryBtnLink = '<a href="#' + $sectionLink + '" class="btn btn-info" role="button">' + $sectionText + '</a>';
$("#heroButton").append($galleryBtnLink); // append button incl text in the heroButton
}); // End of each of all a's of the pagination.
$("#galleryPrev").click(function(){ // Previous button event.
changeGalleryImage($(this));
});
$("#galleryNext").click(function(){ // Next button event.
changeGalleryImage($(this));
});
}); // End document.ready
``