jQuery焦點圖的應用場景及實作方法

<div class="slider">
    <ul class="slides">
        <li><img src="image1.jpg" alt="Image 1"></li>
        <li><img src="image2.jpg" alt="Image 2"></li>
        <li><img src="image3.jpg" alt="Image 3"></li>
    </ul>
    <div class="controls">
        <span class="prev">Previous</span>
        <span class="next">Next</span>
    </div>
</div>

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300%;
}

.slides li {
    float: left;
    width: 33.333%;
}

.controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.controls span {
    cursor: pointer;
    padding: 5px 10px;
    background: #333;
    color: #fff;
    margin: 0 5px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<script>
$(document).ready(function() {
    $('.slides').cycle({
        slides: '> li',
        pauseOnHover: true,
        prev: '.prev',
        next: '.next'
    });
});
</script>