反馈添加轮换效果
candice
9 months ago
parent
4b69ad1973
commit
3b36827cc7
@ -1,73 +1,111 @@
|
||||
<h2 style="text-align: center; position: relative; display: inline-block; width: 100%;padding: 0;">
|
||||
Travelers <span class="review_heart">❤</span> Japan
|
||||
Highlights<span class="review-aggregate__info" aria-label="Open"><svg version="1.1"
|
||||
class="icon icon--vertical icon--size-1-5 icon--primary" role="presentation" width="20" height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
|
||||
</path>
|
||||
</svg></span>
|
||||
<span class="popper__tooltip" data-cy="popper__tooltip" data-show="false" data-popper-placement="right"><span
|
||||
class="popper__content" data-cy="popper__content">Japan Highlights is a proud member of the <a
|
||||
href="/about-us/highlights-travel-family">Highlights Travel Family</a>
|
||||
(trusted
|
||||
since 1998). Reviews are updated monthly from Tripadvisor and Google.</span> <span
|
||||
class="review_close">×</span></span>
|
||||
</h2>
|
||||
|
||||
<h2 style="text-align: center; position: relative; display: inline-block; width: 100%;padding: 0;">
|
||||
Travelers <span class="review_heart">❤</span> Japan
|
||||
Highlights<span class="review-aggregate__info" aria-label="Open"><svg version="1.1"
|
||||
class="icon icon--vertical icon--size-1-5 icon--primary" role="presentation"
|
||||
width="20" height="20" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
|
||||
</path>
|
||||
</svg></span>
|
||||
<span class="popper__tooltip" data-cy="popper__tooltip" data-show="false"
|
||||
data-popper-placement="right"><span class="popper__content"
|
||||
data-cy="popper__content">Japan Highlights is a proud member of the <a
|
||||
href="/about-us/highlights-travel-family">Highlights Travel Family</a> (trusted
|
||||
since 1998). Reviews are updated monthly from Tripadvisor, Google &
|
||||
Trustpilot.</span> <span class="review_close">×</span></span>
|
||||
</h2>
|
||||
|
||||
<div class="table-responsive" style="margin-bottom: 20px;" rel="nofollow">
|
||||
<table style="width: max-content;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="feedback_logo">
|
||||
<img alt="TrustPilot Rating" class="img-responsive" width="382" height="193"
|
||||
src="https://images.japanhighlights.com/allpicture/2025/05/e6e82f033e0b4619a0df404f74578d7f_cut_382x193_241_1748531605.jpg" loader="nolazy" style="margin-bottom: 15px;">
|
||||
<img alt="TripAdvisor Rating"
|
||||
class="img-responsive" width="306" height="176"
|
||||
src="https://images.japanhighlights.com/allpicture/2025/05/dd7bda74592b44b3b98833e3e2f1448a_cut_306x176_241_1748531758.jpg" loader="nolazy">
|
||||
</td>
|
||||
<?php foreach ($feedback_list as $index => $feedback) {?>
|
||||
<td class="tour_feedback feedback_content">
|
||||
<div class="review_name"><?php echo $feedback['customer'] ?></div>
|
||||
<div class="review_nationality"><?php echo $feedback['nationality'] ?></div> <img src="<?php if (strpos($feedback['url'], 'trustpilot.com') == true) { echo 'https://images.japanhighlights.com/allpicture/2024/04/eba8a46e43514b55bb4e1dd15d9b5712_cut_211x40_241.jpg'; } else if (strpos($feedback['url'], 'tripadvisor.com') == true) { echo 'https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png'; } ?>" style="height: 15px; width: auto; filter: brightness(160%);" alt="tour rating">
|
||||
<strong>
|
||||
<?php echo $feedback['title'] ?>
|
||||
</strong>
|
||||
<p>
|
||||
<?php echo $feedback['content'] ?>
|
||||
</p>
|
||||
<a href="<?php echo $feedback['url'] ?>" target="_blank" rel="nofollow">More</a>
|
||||
<div class="customer_name">
|
||||
<strong>Date of Experience:</strong>: <?php echo $feedback['entranceDate'] ?>
|
||||
</div>
|
||||
</td>
|
||||
<?php }?>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="slider swiper-container" id="reviews" style="margin-bottom: 30px; padding-left: 70px;">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
|
||||
<div class="feedback_logo swiper-slide">
|
||||
<img
|
||||
src="https://images.japanhighlights.com/allpicture/2025/06/12df0464b8e246dfa78a0db9a91fc58a_cut_200x50_241_1750427275.png"
|
||||
class="img-responsive" alt="TripAdvisor logo" style="display: block; margin: 0 auto 20px auto;">
|
||||
<img alt="TripAdvisor Rating" class="img-responsive" width="310" height="186"
|
||||
src="https://images.japanhighlights.com/allpicture/2025/06/68427b8b4904419db87c80d69e93ee4b_cut_310x186_241_1750427943.jpg">
|
||||
</div>
|
||||
<?php foreach ($feedback_list as $index => $feedback) {?>
|
||||
<div class="tour_feedback feedback_content swiper-slide">
|
||||
<div class="review_name">
|
||||
<?php echo $feedback['customer'] ?>
|
||||
</div>
|
||||
<div class="review_nationality">
|
||||
<?php echo $feedback['nationality'] ?>
|
||||
</div> <img
|
||||
src="<?php if (strpos($feedback['url'], 'trustpilot.com') == true) { echo 'https://images.japanhighlights.com/allpicture/2024/04/eba8a46e43514b55bb4e1dd15d9b5712_cut_211x40_241.jpg'; } else if (strpos($feedback['url'], 'tripadvisor.com') == true) { echo 'https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png'; } ?>"
|
||||
style="height: 17px; width: auto; filter: brightness(160%);" alt="tour rating">
|
||||
<strong>
|
||||
<?php echo $feedback['title'] ?>
|
||||
</strong>
|
||||
<p>
|
||||
<?php echo $feedback['content'] ?>
|
||||
</p>
|
||||
<a href="<?php echo $feedback['url'] ?>" target="_blank" rel="nofollow">More</a>
|
||||
<div class="customer_name">
|
||||
<strong>Date of Experience:</strong>:
|
||||
<?php echo $feedback['entranceDate'] ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php }?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align: center;">Read 1000+ verified reviews on <a
|
||||
href="https://www.trustpilot.com/review/asiahighlights.com">Trustpilot</a> <img
|
||||
src="https://images.japanhighlights.com/allpicture/2024/04/eba8a46e43514b55bb4e1dd15d9b5712_cut_211x40_241.jpg"
|
||||
style="height: 17px; width: auto; margin: 0 3px; " alt="tour rating" width="211"
|
||||
height="40"> & <a href="https://www.tripadvisor.com/Attraction_Review-g1066457-d32912770-Reviews-Asia_Highlights_Japan_Travel-Shinjuku_Tokyo_Tokyo_Prefecture_Kanto.html">TripAdvisor</a>
|
||||
<img src="https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png"
|
||||
style="height: 15px; width: auto; margin: 0 3px; filter: brightness(170%);"
|
||||
alt="Tour Review">.</p>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const infoIcon = document.querySelector('.review-aggregate__info');
|
||||
const toolTip = document.querySelector('.popper__tooltip');
|
||||
const closeButton = document.querySelector('.review_close');
|
||||
href="https://www.tripadvisor.com/Attraction_Review-g1066457-d32912770-Reviews-Asia_Highlights_Japan_Travel-Shinjuku_Tokyo_Tokyo_Prefecture_Kanto.html">TripAdvisor</a>
|
||||
<img src="https://data.japanhighlights.com/grey.gif"
|
||||
style="height: 15px; width: auto; margin: 0 3px; filter: brightness(170%);"
|
||||
alt="Tour Review" loader="lazy"
|
||||
originalsrc="https://images.chinahighlights.com/allpicture/2024/12/c81b67573a2d40d6922e95b33aeaf03d_cut_80x14_241_1733323252.png">.
|
||||
</p>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const infoIcon = document.querySelector('.review-aggregate__info');
|
||||
const toolTip = document.querySelector('.popper__tooltip');
|
||||
const closeButton = document.querySelector('.review_close');
|
||||
|
||||
infoIcon.addEventListener('click', function() {
|
||||
toolTip.style.display = "block";
|
||||
});
|
||||
infoIcon.addEventListener('click', function () {
|
||||
toolTip.style.display = "block";
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function(event) {
|
||||
toolTip.style.display = "none";
|
||||
});
|
||||
closeButton.addEventListener('click', function (event) {
|
||||
toolTip.style.display = "none";
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var testimonialsSwiper = new Swiper('#reviews', {
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "fraction",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
loop: true,
|
||||
slidesPerView: 3,
|
||||
slidesPerGroup: 3,
|
||||
spaceBetween: 30,
|
||||
});
|
||||
var citiesSwiper = new Swiper('#citiesSlider', {
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "fraction",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
loop: true // 添加循环播放功能
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue