jQuery练习-全屏滚动




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动练习</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .section {
            width: 100%;
            height: 100vh;
            text-align: center;
            line-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        .fullpage {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .slide {
            width: 100%;
            height: 100%;
            background-color: #ddd;
            display: none;
        }
        .slide.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="section">
        <div class="fullpage">
            <div class="slide active">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var current = 0;
            var slides = $('.slide');
            var slideContainer = $('.fullpage');
 
            function goToSlide(index) {
                if (index >= 0 && index < slides.length) {
                    slides.eq(current).removeClass('active');
                    slides.eq(index).addClass('active');
                    current = index;
                }
            }
 
            $(document).keydown(function(e) {
                switch (e.which) {
                    case 37: // left
                        goToSlide(current - 1);
                        break;
                    case 39: // right
                        goToSlide(current + 1);
                        break;
                    default:
                        return;
                }
                e.preventDefault();
            });
 
            // 初始化时显示第一个幻灯片
            goToSlide(0);
        });
    </script>
</body>
</html>

这段代码使用jQuery实现了一个简单的全屏滚动效果，并通过左右键导航来切换幻灯片。在这个实践中，我们使用jQuery的.eq()方法来获取特定索引的元素，并通过.addClass()和.removeClass()来切换幻灯片的显示状态。同时，我们使用.keydown()方法监听键盘事件，根据用户按键的方向切换当前幻灯片。这个示例提供了一个基本的模板，可以根据实际需求进行扩展和定制。

jQuery练习-全屏滚动

评论已关闭

推荐阅读