phpcms焦点图标签

{pc:content action="lists" catid="10" num="5" order="id DESC" return="data"}
<div class="focus-image">
    {loop $data $key $val}
    <div class="focus-item">
        <img src="{$val['thumb']}" alt="{$val['title']}" />
        <p>{$val['description']}</p>
    </div>
    {/loop}
</div>
{/pc}

.focus-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.focus-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.focus-item img {
    width: 100%;
    height: auto;
}

document.addEventListener('DOMContentLoaded', function() {
    let items = document.querySelectorAll('.focus-item');
    let index = 0;

    function showItem(index) {
        items.forEach((item, i) => {
            item.style.opacity = i === index ? 1 : 0;
        });
    }

    function nextItem() {
        index = (index + 1) % items.length;
        showItem(index);
    }

    setInterval(nextItem, 3000);
    showItem(index);
});