我正在制作一個標準滑塊，它有兩個按鈕可以瀏覽影像。但是我想讓它模塊化。這樣最終用戶可以根據需要添加 200 張影像。我使用 Jquery 來隱藏和顯示影像。但是我不想寫 200 個 if 陳述句，所以我使用了一個開關，并希望通過該開關回圈，該開關更改案例活動幻燈片以顯示和隱藏其他元素，并在達到專案數量時停止。
但是我遇到了一些問題，有沒有比我更有經驗的人可以提供幫助
$('.slider-wrap').each( function() {
let itemsAmount = $('.slider-img', $(this)).length;
console.log(itemsAmount);
});
let currentPic = 0;
$('.sliderbuttonPlus').on('click', () => {
currentPic ;
let itemsAmount = $('.slider-img', $('.slider-wrap')).length;
switch(currentPic) {
case 0:
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
break;
case 1:
$('.slider-img').css('display', 'none');
$('#slider-block-image-1').css('display', 'block');
break;
case 2:
$('.slider-img').css('display', 'none');
$('#slider-block-image-2').css('display', 'block');
break;
case 3:
$('.slider-img').css('display', 'none');
$('#slider-block-image-3').css('display', 'block');
break;
case 4:
$('.slider-img').css('display', 'none');
$('#slider-block-image-4').css('display', 'block');
break;
case 5:
$('.slider-img').css('display', 'none');
$('#slider-block-image-5').css('display', 'block');
break;
case 6:
$('.slider-img').css('display', 'none');
$('#slider-block-image-6').css('display', 'block');
break;
case 7:
$('.slider-img').css('display', 'none');
$('#slider-block-image-7').css('display', 'block');
break;
case 8:
$('.slider-img').css('display', 'none');
$('#slider-block-image-8').css('display', 'block');
break;
case 9:
$('.slider-img').css('display', 'none');
$('#slider-block-image-9').css('display', 'block');
break;
}
if(currentPic > itemsAmount) {
currentPic = itemsAmount;
};
console.log(currentPic);
});
$('.sliderbuttonMinus').on('click', () => {
currentPic--;
switch(currentPic) {
case 0:
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
break;
case 1:
$('.slider-img').css('display', 'none');
$('#slider-block-image-1').css('display', 'block');
break;
case 2:
$('.slider-img').css('display', 'none');
$('#slider-block-image-2').css('display', 'block');
break;
case 3:
$('.slider-img').css('display', 'none');
$('#slider-block-image-3').css('display', 'block');
break;
case 4:
$('.slider-img').css('display', 'none');
$('#slider-block-image-4').css('display', 'block');
break;
case 5:
$('.slider-img').css('display', 'none');
$('#slider-block-image-5').css('display', 'block');
break;
case 6:
$('.slider-img').css('display', 'none');
$('#slider-block-image-6').css('display', 'block');
break;
case 7:
$('.slider-img').css('display', 'none');
$('#slider-block-image-7').css('display', 'block');
break;
case 8:
$('.slider-img').css('display', 'none');
$('#slider-block-image-8').css('display', 'block');
break;
case 9:
$('.slider-img').css('display', 'none');
$('#slider-block-image-9').css('display', 'block');
break;
}
if (currentPic <= 0){
currentPic = 0;
};
console.log(currentPic);
});
if (currentPic === 0) {
$('.slider-img').css('display', 'none');
$('#slider-block-image-0').css('display', 'block');
}
console.log(currentPic);
});
網站上顯示的 HTML
<div class="slider-wrap">
<div class="button-wrap">
<button class="sliderbuttonMinus">Links</button>
</div>
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/warhammer-1.jpg" alt="" id="slider-block-image-0" style="display: block;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/xcom-1.jpg" alt="" id="slider-block-image-1" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skyrim-1.jpg" alt="" id="slider-block-image-2" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skylines-1.jpg" alt="" id="slider-block-image-3" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Sea-of-thieves-1.jpg" alt="" id="slider-block-image-4" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Mario-1.jpg" alt="" id="slider-block-image-5" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Minecraft-1.jpg" alt="" id="slider-block-image-6" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Overwatch-1.jpg" alt="" id="slider-block-image-7" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Half-life-1.jpg" alt="" id="slider-block-image-8" style="display: none;">
<img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/hearthstone-1.jpg" alt="" id="slider-block-image-9" style="display: none;">
<div class="button-wrap">
<button class="sliderbuttonPlus">Rechts</button>
</div>
</div>
PHP
<div class="slider-wrap">
<div class="button-wrap">
<button class="sliderbuttonMinus">Links</button>
</div>
<?php
// Check rows exists.
if( have_rows('afbeeldingen_slider') ):
$x = 0;
// Loop through rows.
while( have_rows('afbeeldingen_slider') ) : the_row();
// Load sub field value.
$image = get_sub_field('slider_image');
$image_url = $image['url'];
$image_alt = $image['alt'];
?>
<img class="slider-img" src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>" id="slider-block-image-<?php echo $x?>">
<?php
// Do something...
$x ;
// End loop.
endwhile;
// No value.
else :
// Do something...
endif;
?> <div class="button-wrap">
<button class="sliderbuttonPlus">Rechts</button>
</div>
</div>
uj5u.com熱心網友回復：
您只需要一個部分，帶有圖片的動態索引或指示器。
$('.slider-img').css('display', 'none');
$('#slider-block-image-' currentPic).css('display', 'block');
// ^^^^^^^^^^^^^
uj5u.com熱心網友回復：
作為imgHTML 中硬編碼元素和 javascript/jQuery 代碼中重復宣告的替代方案，您可以按照我的建議，使用陣列來支持整個幻燈片放映。使用陣列，您只需添加額外的img源，然后它應該無需額外編碼即可運行。這是用vanilla js草草寫的
// the index that points to current active picture
let cpic=0;
const d=document;
const parent = d.querySelector('div.slider-wrap');
const child = parent.firstElementChild;
const _CN='active';
const insertafter = (node, ref) => {
ref.parentNode.insertBefore(node, ref.nextSibling)
};
// modify the global index variable `cpic`
// depending upon which button was clicked.
const clickhandler=function(e){
switch( this.dataset.dir ){
case 'minus':cpic--;break;
case 'plus':cpic ;break;
}
if( cpic < 0 )cpic=images.length - 1;
if( cpic > images.length - 1 )cpic=0;
/*
remove active class from all images
and add to currently selected
*/
parent.querySelectorAll('img').forEach((img,i)=>{
img.classList.remove(_CN);
if( i==cpic )img.classList.add(_CN);
})
};
const path = 'https://zelfbouwcontainer.online/wp-content/';
/*
This array powers the slide show. Add as many items
to it as needed.
*/
const images = [
'/uploads/2021/11/warhammer-1.jpg',
'/uploads/2021/11/xcom-1.jpg',
'/uploads/2021/11/Skyrim-1.jpg',
'/uploads/2021/11/Skylines-1.jpg',
'/uploads/2021/11/Sea-of-thieves-1.jpg',
'/uploads/2021/11/Mario-1.jpg',
'/uploads/2021/11/Minecraft-1.jpg',
'/uploads/2021/11/Overwatch-1.jpg',
'/uploads/2021/11/Half-life-1.jpg',
'/uploads/2021/11/hearthstone-1.jpg'
];
/* dynamically add all images to the page, hidden based upn css class */
images.forEach((src, i) => {
let img = new Image();
img.src = path src;
img.className = 'slider-img';
img.id = 'slider-block-image-' i;
img.dataset.id = i;
insertafter(img, child)
});
/* set the first image visible */
parent.querySelector('img:first-of-type').classList.add(_CN);
d.querySelectorAll('button[data-dir]').forEach(bttn=>bttn.addEventListener('click',clickhandler));.slider-wrap img{
display:none;
}
.slider-wrap img.active{
display:block;
}<div class="slider-wrap">
<div class="button-wrap">
<button data-dir='minus' class="sliderbuttonMinus">Links</button>
</div>
<!-- dynamically add images here from array -->
<div class="button-wrap">
<button data-dir='plus' class="sliderbuttonPlus">Rechts</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392412.html
標籤：javascript php 查询