PHP 网站循环播放代码实现
·
PHP 网站循环播放代码实现
在 PHP 网站中实现循环播放功能通常涉及前端展示和后端数据处理的结合。以下是几种常见的循环播放实现方式:
1. 图片轮播(使用 PHP 生成数据 + 前端 JavaScript 循环)
php
<?php
// 数据库或数据源中的图片列表(示例)
$slides = [
['image' => 'images/slide1.jpg', 'url' => '#', 'alt' => '幻灯片1'],
['image' => 'images/slide2.jpg', 'url' => '#', 'alt' => '幻灯片2'],
['image' => ' ', 'url' => '#', 'alt' => '幻灯片3'],
];
?>
<!-- HTML 部分 -->
<div class="slider-container">
<div class="slider">
<?php foreach ($slides as $slide): ?>
<div class="slide">
<a href="<?php echo htmlspecialchars($slide['url']); ?>">
<img src="<?php echo htmlspecialchars($slide['image']); ?>"
alt="<?php echo htmlspecialchars($slide['alt']); ?>">
</a>
</div>
<?php endforeach; ?>
</div>
<button class="slider-prev">❮</button>
<button class="slider-next">❯</button>
</div>
<!-- CSS 和 JavaScript -->
<style>
.slider-container {
position: relative;
max-width: 800px;
margin: auto;
}
.slider {
display: flex;
overflow: hidden;
}
.slide {
min-width: 100%;
transition: transform 0.5s ease;
}
.slide img {
width: 100%;
height: auto;
}
.slider-prev, .slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.slider-next {
right: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.slider-prev');
const nextBtn = document.querySelector('.slider-next');
let currentIndex = 0;
const slideCount = slides.length;
function updateSlider() {
slider.style更多推荐
所有评论(0)