Question

如何将以下彩色div相互对齐，以便每个div都是浏览器窗口的全宽（响应），并且一次只显示一个？

HTML：

<div class="content-area">
  <div class="p1">Page 1</div>
  <div class="p2">Page 2</div>
  <div class="p3">Page 3</div>
</div>

<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>

CSS：

body {background: grey;}

.p1 {
  background: red;
  float: left;
  width: 100%;
  display: inline;
  overflow: hidden;
}

.p2 {
  background: blue;
  float: left;
  width: 100%;
  display: inline;
  overflow: hidden;
}

.p3 {
  background: green;
  float: left;
  width: 100%;
  display: inline;
  overflow: hidden;
}

.content-area {
  width: 100%;
  overflow: hidden;
}

此外，当用户选择上一个和下一个按钮时，如何根据选择的锚链接向左或向右推div？

Answer 1

我真的建议您slick.js来创建您所追求的轮播效果。

它非常易于设置，允许响应式设计，与旧IE完全兼容，并具有内置的箭头和点等功能！

如果您想运行自己的，我建议您在javascript中使用css转换＆amp;过渡以确保最佳性能。

例如，

.page{
 width: 100%;
 height: 500px; 
 position: absolute;
 top: 0;
 transition: .5s;
}
.hide-left{
 transform: translateX(-100%);
}
.hide-right{
 transform: translateX(100%);
}

在需要的地方添加浏览器特定的前缀。

Answer 2

这是解决方案之一，定义父级（页数）x 100％宽度和页面的每个子级100％/（页数）宽度：

var currentPage = 0;
$('.previous-page').on('click', function() {
  currentPage--;
  $('.content-area').css('left', (currentPage * -100) + '%');
});
$('.next-page').on('click', function() {
  currentPage++;
  $('.content-area').css('left', (currentPage * -100) + '%');
});

body {background: grey;}
.content-area div {
  float: left;
  width: 33.3333%;
  display: inline;
  overflow: hidden;
}
.p1 {
  background: red;
}
.wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.content-area {
  width: 300%;
  overflow: hidden;
  left: 0;
  position: relative;
  -webkit-transition: left 2s;
  transition: left 2s;
}

.p2 {
  background: blue;
}
.p3 {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="content-area">
    <div class="p1">Page 1</div>
    <div class="p2">Page 2</div>
    <div class="p3">Page 3</div>
  </div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>

你可以改进脚本，我只是用来说明滑块。

Answer 3

在这里，我创建了一个jsfiddle here，因为我认为它是你想要的。我还在下面创建了一个片段。

$(document).ready(function () {
    for (var i = 0; i < $(".content-area div").length; i++) {
        $(".content-area div").eq(i).css({
            left: "+=" + parseInt($(".content-area").width() * i, 10)
        });
    }
});

var currentPage = 0; //0th index

$(".previous-page").click(function () {
    changePage(-1);
});
$(".next-page").click(function () {
    changePage(1);
});

function changePage(updown) {
    if ($(".content-area div")[currentPage + updown]) {
        $(".content-area div").animate({
            left: "+=" + parseInt($(".content-area").width() * -updown, 10)
        },1600);
        currentPage += updown;
    }
}

body, html {
    background: grey;
    margin: 0;
    padding: 0;
}
.p1 {
    background: red;
}
.p2 {
    background: blue;
}
.p3 {
    background: green;
}
.content-area {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow: hidden;
}
.content-area div {
    position:absolute;
    left:0;
    width: 100%;
    height:100%;
}
.next-page, .previous-page {
    z-index:2;
    position:fixed;
    bottom:5px;
}
.next-page {
    right:5px;
}
.previous-page {
    left:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-area">
    <div class="p1">Page 1</div>
    <div class="p2">Page 2</div>
    <div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>

<a class="next-page" href="#">Next Page</a>

对齐div通过浏览器宽度与幻灯片有效

3 个答案: