jquery左右移动

jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作，在 jQuery 中，我们可以使用其内置的 animate() 函数来实现左右滑动效果，以下是详细的技术教学：

（图片来源网络，侵删）

1、确保你已经在 HTML 文件中引入了 jQuery 库，可以通过以下方式引入：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、创建一个 HTML 文件，包含一个需要实现左右滑动效果的元素，我们创建一个包含三个列表项的无序列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery 左右滑动效果</title>
    <style>
        ul {
            liststyletype: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        li {
            float: left;
            marginright: 10px;
        }
    </style>
</head>
<body>
    <ul id="slider">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        // 在这里编写 jQuery 代码实现左右滑动效果
    </script>
</body>
</html>

3、接下来，我们将编写 jQuery 代码实现左右滑动效果，我们需要获取列表项的宽度和总宽度：

var itemWidth = $('#slider li').outerWidth(true); // 获取列表项的宽度（包括 margin）
var totalWidth = itemWidth * $('#slider li').length; // 计算总宽度

4、我们需要定义一个变量来存储当前显示的列表项索引：

var currentIndex = 0;

5、现在，我们可以编写 prev 和 next 按钮的事件处理函数，当点击 prev 按钮时，我们需要将当前显示的列表项向左移动一位；当点击 next 按钮时，我们需要将当前显示的列表项向右移动一位，为了实现这个效果，我们可以使用 animate() 函数来改变列表项的 left 属性：

$('#prev').click(function() {
    if (currentIndex > 0) { // 如果当前显示的不是第一个列表项，则向左移动一位
        currentIndex;
        $('#slider li').animate({ left: currentIndex * itemWidth }, 'slow'); // 使用 animate() 函数改变列表项的 left 属性，实现左右滑动效果
    } else { // 如果当前显示的是第一个列表项，则不做任何操作（保持不动）
        return;
    }
});

$('#next').click(function() {
    if (currentIndex < $('#slider li').length 1) { // 如果当前显示的不是最后一个列表项，则向右移动一位
        currentIndex++;
        $('#slider li').animate({ left: currentIndex * itemWidth }, 'slow'); // 使用 animate() 函数改变列表项的 left 属性，实现左右滑动效果
    } else { // 如果当前显示的是最后一个列表项，则不做任何操作（保持不动）
        return;
    }
});

6、现在，我们已经实现了一个简单的左右滑动效果，你可以根据需要调整样式和动画速度，完整的代码如下：

<div style="position: relative; width: 300px; height: 100px; border: 1px solid black;">
    <div id="slider" style="position: absolute; whitespace: nowrap;">
        <div class="item" style="display: inlineblock; width: 100px; height: 100px; backgroundcolor: red;"></div>
        <div class="item" style="display: inlineblock; width: 100px; height: 100px; backgroundcolor: green;"></div>
        <div class="item" style="display: inlineblock; width: 100px; height: 100px; backgroundcolor: blue;"></div>
    </div>
    <button id="prev">Previous</button> <button id="next">Next</button> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/></div>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        var itemWidth = $('div.item').outerWidth(true); // 获取列表项的宽度（包括 margin）
        var totalWidth = itemWidth * $('div.item').length; // 计算总宽度
        var currentIndex = $('div.item').index($('div.item').filter(':first')); // 获取当前显示的第一个列表项的索引（从左到右）
        $('div.item').css('left', currentIndex * itemWidth); // 根据当前显示的第一个列表项的索引设置初始位置（负值表示向左偏移）
        $('#prev').click(function() { // Previous button click event handler
            if (currentIndex > 0) { // 如果当前显示的不是第一个列表项，则向左移动一位（注意：这里不需要更新 currentIndex）
                $('div.item').animate({ left: currentIndex itemWidth }, 'slow'); // 使用 animate() 函数改变列表项的 left 属性，实现左右滑动效果（注意这里不需要更新 currentIndex）
            } else { // 如果当前显示的是第一个列表项，则不做任何操作（保持不动）

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/373246.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。