0
This is the site。你不必訪問該網站，一切都寫在這裏。這是wordpress使用老WordPress的主題，我不能修改，使圖像看起來像一個縮略圖幻燈片。我可以訪問頁眉和頁腳來編寫CSS和所需的JavaScript，但很難找到哪個函數正在回顯圖像並手動編寫類。我可以使用jquery如何使用jquery編寫bootstrap輪播元素？
所以我把這個例子
// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {
\t var conf = {
\t \t center: true,
\t \t backgroundControl: false
\t };
\t var cache = {
\t \t $carouselContainer: $('.thumbnails-carousel').parent(),
\t \t $thumbnailsLi: $('.thumbnails-carousel li'),
\t \t $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
\t };
\t function init() {
\t \t cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
\t \t cache.$thumbnailsLi.first().addClass('active-thumbnail');
\t \t if(!conf.backgroundControl) {
\t \t \t cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
\t \t }
\t \t else {
\t \t \t cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
\t \t }
\t \t if(conf.center) {
\t \t \t cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
\t \t }
\t }
\t function refreshOpacities(domEl) {
\t \t cache.$thumbnailsLi.removeClass('active-thumbnail');
\t \t cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
\t } \t
\t function bindUiActions() {
\t \t cache.$carouselContainer.on('slide.bs.carousel', function(e) {
\t \t \t refreshOpacities(e.relatedTarget);
\t \t });
\t \t cache.$thumbnailsLi.click(function(){
\t \t \t cache.$carouselContainer.carousel($(this).index());
\t \t });
\t }
\t $.fn.thumbnailsCarousel = function(options) {
\t \t conf = $.extend(conf, options);
\t \t init();
\t \t bindUiActions();
\t \t return this;
\t }
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();/* Just for demo */
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
\t padding: 5px 0 0 0;
\t margin: 0;
\t list-style-type: none;
\t text-align: center;
}
ul.thumbnails-carousel .center {
\t display: inline-block;
}
ul.thumbnails-carousel li {
\t margin-right: 5px;
\t float: left;
\t cursor: pointer;
}
.controls-background-reset {
\t background: none !important;
}
.active-thumbnail {
\t opacity: 0.4;
}
.indicators-fix {
\t bottom: 70px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
\t <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
\t <!-- Indicators -->
\t <ol class="carousel-indicators">
\t <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="1"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="2"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="3"></li>
\t </ol>
\t <!-- Wrapper for slides -->
\t <div class="carousel-inner">
\t <div class="item active srle">
\t <img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 1.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 2.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 3.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 4.jpg </p>
\t </div>
\t </div>
\t </div>
\t <!-- Controls -->
\t <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
\t <span class="glyphicon glyphicon-chevron-left"></span>
\t </a>
\t <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
\t <span class="glyphicon glyphicon-chevron-right"></span>
\t </a>
\t <!-- Thumbnails -->
\t <ul class="thumbnails-carousel clearfix">
\t \t <li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
\t </ul>
\t </div>而且修改了它，像這樣編輯類，假設我沒有什麼，但圖像和我想建立使用jQuery休息
;(function(window, $, undefined) {
\t var conf = {
\t \t center: true,
\t \t backgroundControl: false
\t };
\t var cache = {
\t \t $carouselContainer: $('.thumbnails-carousel').parent(),
\t \t $thumbnailsLi: $('.thumbnails-carousel li'),
\t \t $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
\t };
\t function init() {
\t \t cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
\t \t cache.$thumbnailsLi.first().addClass('active-thumbnail');
\t \t if(!conf.backgroundControl) {
\t \t \t cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
\t \t }
\t \t else {
\t \t \t cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
\t \t }
\t \t if(conf.center) {
\t \t \t cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
\t \t }
\t }
\t function refreshOpacities(domEl) {
\t \t cache.$thumbnailsLi.removeClass('active-thumbnail');
\t \t cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
\t } \t
\t function bindUiActions() {
\t \t cache.$carouselContainer.on('slide.bs.carousel', function(e) {
\t \t \t refreshOpacities(e.relatedTarget);
\t \t });
\t \t cache.$thumbnailsLi.click(function(){
\t \t \t cache.$carouselContainer.carousel($(this).index());
\t \t });
\t }
\t $.fn.thumbnailsCarousel = function(options) {
\t \t conf = $.extend(conf, options);
\t \t init();
\t \t bindUiActions();
\t \t return this;
\t }
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
\t $('img').wrap('<div class="img-responsive"></div>');
\t $('.img-responsive').wrap('<div class="item"></div>');
\t $('.item').wrapAll('<div class="carousel-inner"></div>');
\t $('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');
$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;
var counter =0;
for (i = counter; i < numItems; i++) {
\t // I don't know how to continue from here
}
\t $('.item:first').addClass('active srle');body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
\t padding: 5px 0 0 0;
\t margin: 0;
\t list-style-type: none;
\t text-align: center;
}
ul.thumbnails-carousel .center {
\t display: inline-block;
}
ul.thumbnails-carousel li {
\t margin-right: 5px;
\t float: left;
\t cursor: pointer;
}
.controls-background-reset {
\t background: none !important;
}
.active-thumbnail {
\t opacity: 0.4;
}
.indicators-fix {
\t bottom: 70px;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
\t <img src="https://s29.postimg.org/xaf064313/image.jpg" >
\t <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >正如您所看到的，我到達那裏，我不知道要在for循環中放置什麼以生成縮略圖和旋轉木馬指示器。我希望我不會錯過任何東西。
請你加入縮略圖:) – Lynob
請點擊這裏https://codepen.io/srkimir/pen/mGbrf仿效這一做法並使用與添加元素相同的方式。 –