Question

我正在尝试创建一个类似于this的轮播滑块，类似于我们在Android中所拥有的。

我正处于创建之初，而我遇到的问题是我使用的是try { ServerSocket welcomeSocket = new ServerSocket(PORT); Socket connectionSocket = welcomeSocket.accept(); BufferedReader inFromClient = new BufferedReader(new InputStreamReader(connectionSocket.getInputStream())); recieveType = inFromClient.readLine(); //reads the recieveType, packet or other packetID = inFromClient.readLine(); //reads the packet ID packetData1 = inFromClient.readLine(); //reads first line of packet data } catch(IOException e) { e.printStackTrace(); }，但我只想让它水平修复，因为它需要滚动。

如何仅将position: fixed;应用于水平滚动？

Bellow，是我目前正在使用的代码：

position: fixed;

var val = 0;
$("button").click(function() {
  for (var i = 0; i < 9; i++) {
    $('.MySlide:nth-child(' + (i + 1) + ')').removeClass('MySlide' + (((val + i) % 9) + 1) + '');
    $('.MySlide:nth-child(' + (i + 1) + ')').addClass('MySlide' + (((val + i + 1) % 9) + 1) + '');
  }
  val = (val + 1) % 9;
});

.long-div {
  height: 300px;
}
.MySlides-wrap {
  border: 1px;
  border-style: solid;
  height: 350px;
}
.MySlide {
  float: left;
  width: 300px;
  height: 300px;
  position: fixed;
  transition: transform 500ms;
  left: -75px;
  border: 1px;
  border-style: solid;
  background-color: blue;
}
.MySlide1 {
  z-index: 1;
  transform: translate(0px, 0px) scale(0.6, 0.6);
}
.MySlide2 {
  z-index: 2;
  transform: translate(150px, 0px) scale(0.7, 0.7);
}
.MySlide3 {
  z-index: 3;
  transform: translate(300px, 0px) scale(0.8, 0.8);
}
.MySlide4 {
  z-index: 4;
  transform: translate(450px, 0px) scale(0.9, .9);
}
.MySlide5 {
  z-index: 5;
  transform: translate(600px, 0px) scale(1, 1);
}
.MySlide6 {
  z-index: 4;
  transform: translate(750px, 0px) scale(0.9, .9);
}
.MySlide7 {
  z-index: 3;
  transform: translate(900px, 0px) scale(0.8, 0.8);
}
.MySlide8 {
  z-index: 2;
  transform: translate(1050px, 0px) scale(0.7, 0.7);
}
.MySlide9 {
  z-index: 1;
  transform: translate(1200px, 0px) scale(0.6, 0.6);
}
.MySlideFutured {
  z-index: 9;
  transform: scale(1, 1);
}

Answer 1

这个问题有很多解决方案，但固定定位用于在屏幕上的某个位置粘贴某些东西，而不是在网页中的位置。我建议创建可滚动容器并使用jquery控制滚动偏移。

工作示例（至少在Chrome和Firefox中，还没有测试过其他人）：

https://jsfiddle.net/7duatxmv/

原谅用于演示的内联样式：

<div id="slideContainer" style="position:relative; overflow:hidden; white-space: nowrap;">
    <div class="slide" style="display:inline-block;">
        Content 1
    </div>
    <div class="slide selected" style="display:inline-block;">
        Content 2 (scroll to me by default)
    </div>
    <div class="slide" style="display:inline-block;">
        Content 3
    </div>
</div>

在这种情况下，＆＃34; slideContainer＆＃34;宽度等于单个幻灯片的宽度，并使用浏览器的原生滚动在幻灯片之间切换。

jQuery可以通过.scrollLeft（）和.offset（）来控制滚动。

使用固定位置滚动时出现问题

1 个答案: