-1

我正在制作一个有多个页面的网站。我希望它们不是不同的网页，而是同一页面上的不同 div。然后我有两个左右按钮，当用户单击特定 div 时，它应该根据箭头向左或向右滑动。如何使用 jQuery、HTML、CSS 做到这一点？

我的分区： 

<div id="main-page">    
</div>
<div id="about-us">
</div>
<div id="contact-us">
</div>

Div 有一个特定的背景图像，它们的大小是全屏的。

我的脚本：

$("#main-page").click(function() {
    $("#main-page").hide("slide", {direction: "left"}, 1000);
    $("#about-us").show("slide", {direction: "right"}, 1000);
});

正如我所说，我不想那样做。我想要箭头来检查哪个 div 可以向左或向右滑动。

4

2 回答 2

2

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<input type="button" class="next" value="Next">
<input type="button" class="prev" value="Prev">

CSS

#wrapper {
    white-space: nowrap;
    width: 1500px
}

.box {
    width: 200px;
    height: 200px;
    border: thin solid red;
    margin: 0 10px 0 0;
    display: inline-block
}

​.prev,
.next { position: fixed; top: 50% }

.prev { left: 0 }
.next { right: 0 }

JS

$(function() {
    // We create an array and populate
    // it with all .box left offsets
    var boxLefts = [];
    $('.box').each(function(i, el) {
        boxLefts.push(this.offsetLeft);
    });

    // Now we attach an on click event handler
    // to our prev/next buttons
    $(".prev, .next").click(function(e) {
        var dir = false,
            targetLeft = -1;

        // to get the current direction
        // we use the className of the current clicked button
        var target = e.target.className;

        // we set the earlier defined direction variable
        // based on the clicked button
        if (target == 'next') {
            dir = 1;
        } else {
            dir = -1;
        }

        // when the next-button is clicked
        // we loop through the .box-offsets array
        if (dir) {
            // prevent the default onclick behaviour
            e.preventDefault();

            // get the current scroll-offset
            winLeft = window.scrollX;

            $.each(boxLefts, function(i, v) {
                // we check that we are not at the end or beginning
                // of the viewport. If we are not
                // we set targetLeft to the current/matching offsets-array item.
                if ((dir == 1 && winLeft < v && targetLeft < 0) || (dir == -1 && winLeft > v)) {
                    targetLeft = v;
                }
            });

            // if truthy we animate the scrolling to the next/previous box-offset
            if (!targetLeft) {
                $('html:not(:animated), body:not(:animated)').stop().animate({
                    scrollLeft: targetLeft
                }, 1000);
            }
        }

        // prevent the default onclick behaviour
        return false;
    });
});

演示

于 2012-09-16T12:47:57.637 回答
0

它可能是这样的：

<div class='container'>
    <div class='all-pages'>
        <div class='page' id='page-1'>PAGE 1</div>
        <div class='page' id='page-2'>PAGE 2</div>
        <div class='page' id='page-3'>PAGE 3</div>
        <div class='page' id='page-4'>PAGE 4</div>
    </div>
</div>

.container {
   width: 960px;
   overflow: hidden;
   position: relative;
}

.all-pages {
   float:left;
   width: 10000px;
   position: relative;
   left: 0;
   top:0;
}

.page {
   float: left;
   width: 960px;
}

本质上，它与 jCarousel 的原理相同，只是您将元素的定位和宽度基于更大的比例，因此每个项目都填充页面：

  • container- 可视区域

  • all-pages- 实际上是所有页面的“卷轴”

接下来，您需要向页面（或菜单？）添加左右按钮来滚动显示。这些必须绝对定位，以便它保持在容器视图中。

当您为左右按钮添加功能时，您只需使用 jQuery 动画样式函数来更改所有页面 div 内的 left 值，这将创建一个平滑的过渡。

于 2012-09-16T11:46:01.237 回答