jquery左右箭头翻页焦点图代码

基础概念

jQuery左右箭头翻页焦点图是一种常见的网页交互效果，用于在有限的空间内展示多个图片，并通过左右箭头控制图片的切换。这种效果通常用于网站首页、产品展示页等场景，以吸引用户的注意力并提供便捷的浏览方式。

类型

自动播放：图片会自动切换，用户也可以通过点击箭头手动切换。
手动播放：图片不会自动切换，用户只能通过点击箭头手动切换。
触摸滑动：支持触摸屏设备，用户可以通过滑动切换图片。

应用场景

网站首页：展示公司或产品的多张图片，吸引用户进一步浏览。
产品展示页：展示产品的多角度图片，帮助用户更好地了解产品。
新闻动态：展示最新的新闻图片，方便用户快速浏览。

示例代码

以下是一个简单的jQuery左右箭头翻页焦点图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery焦点图</title>
    <style>
        .slider {
            width: 600px;
            overflow: hidden;
            position: relative;
        }
        .slider ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        .slider li {
            width: 100%;
        }
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .left-arrow {
            left: 10px;
        }
        .right-arrow {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul>
            <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="arrow left-arrow">←</div>
        <div class="arrow right-arrow">→</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $slider = $('.slider');
            var $sliderUl = $slider.find('ul');
            var $items = $sliderUl.find('li');
            var itemWidth = $items.eq(0).width();
            var itemCount = $items.length;
            var currentIndex = 0;

            function moveToNextItem() {
                if (currentIndex < itemCount - 1) {
                    currentIndex++;
                    $sliderUl.animate({ 'left': -currentIndex * itemWidth }, 500);
                }
            }

            function moveToPrevItem() {
                if (currentIndex > 0) {
                    currentIndex--;
                    $sliderUl.animate({ 'left': -currentIndex * itemWidth }, 500);
                }
            }

            $('.right-arrow').click(moveToNextItem);
            $('.left-arrow').click(moveToPrevItem);
        });
    </script>
</body>
</html>