要创建一个使用jQuery的左右切换图片的简单模板,你可以使用HTML、CSS和jQuery。以下是一个基本的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider</title>
    <style>
        #slider-container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        #image-slider {
            width: 300%; /* 每张图片宽度的总和 */
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            float: left;
            width: 33.33%; /* 图片宽度的百分比 */
            box-sizing: border-box;
        }

        img {
            width: 100%;
            height: auto;
        }

        #prev, #next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        #next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        #prev:hover, #next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>

<div id="slider-container">
    <div id="image-slider">
        <div class="slide">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="slide">
            <img src="image3.jpg" alt="Image 3">
        </div>
        <!-- Add more slides as needed -->
    </div>
</div>

<div id="prev">&#10094;</div>
<div id="next">&#10095;</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function(){
        var currentIndex = 0;
        var totalSlides = $('.slide').length;

        $('#next').click(function(){
            if (currentIndex < totalSlides - 1) {
                currentIndex++;
            } else {
                currentIndex = 0;
            }
            updateSlider();
        });

        $('#prev').click(function(){
            if (currentIndex > 0) {
                currentIndex--;
            } else {
                currentIndex = totalSlides - 1;
            }
            updateSlider();
        });

        function updateSlider() {
            var translateValue = -currentIndex * 100 / totalSlides + '%';
            $('#image-slider').css('transform', 'translateX(' + translateValue + ')');
        }
    });
</script>

</body>
</html>

在这个例子中,图片轮播使用了一个包含所有幻灯片的容器 (#image-slider),通过改变 transform 属性来实现左右切换效果。点击 "prev" 和 "next" 按钮会更新当前幻灯片的索引,并更新轮播的显示。请替换 image1.jpg、image2.jpg 等图片的路径为你实际使用的图片。

版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/template-left-and-right.html
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!