Question

我有CSS / JS滑块的问题。我使用简单的方法使其工作 - 较小的元素（var a = db.Categories.ToList().AsHierarchy(e => e.id, e => e.parentId,category); catModel = (from prod in ArticleList() join cats in a.ToList() on prod.Category equals cats.Parent.Category select prod).ToList();）在较小的（container）内隐藏溢出。滑块上方有按钮area＆amp; btn来控制更大元素（btn2）的移动

问题是它只能在＆＃34;第一张幻灯片＆＃34;到达（蓝色），然后无法滑到第二个（红色）。

小提琴：https://jsfiddle.net/26r32hb6

＆＃13;

containter

＆＃13;

var button = document.querySelector('.btn');
var button2 = document.querySelector('.btn2');
var container = document.querySelector('.container');

button.style.background = 'blue';
button2.style.background = 'blue';
container.style.backgroundColor = 'blue';

button.onclick = function() {  
   if (container.style.left == 0) {  
     container.style.left = '-100.5%';    
     container.style.backgroundColor = 'red';     
     button.style.backgroundColor = 'red';
     button2.style.backgroundColor = 'red';}
else if (container.style.left == '-100.5%') {
  container.style.left = '-200.5%';
  container.style.backgroundColor = 'purple';   
  button.style.backgroundColor = 'purple'; 
  button2.style.backgroundColor = 'purple';    
}
};
button2.onclick = function() {
  if (container.style.left == '-100.5%') { 
    container.style.left = 0; 
    container.style.backgroundColor = 'blue';  
    button.style.backgroundColor = 'blue';
    button2.style.backgroundColor = 'blue';}
  else if (container.style.left == '-200.5%') { 
    container.style.left = '-100.5%';
    container.style.backgroundColor = 'red';      
    button.style.backgroundColor = 'red';
    button2.style.backgroundColor = 'red';
}
};

＆＃13;

.wrapbtns {
  width: 365px;
  height: 50px;
  background: yellow;
}
.btn {
  width: 50px;
  height: 50px;
   float: right;
}
.btn2 {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
}
.btn, .btn2 {
  transition-duration: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;

}
.area {
  width: 365px;
  height: 250px;
  overflow: hidden; /* This */
  position: relative;
}
.container {
  background: blue;
  width: 1100px;
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  left: 0;
  position: absolute;
  transition-duration: 1s;
}
.box {
  background: yellow;
  min-width: 100px;
  height: 100px;
  margin: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 48px;
  transition-duration: 500ms;
}

＆＃13;

Answer 1

首先，如果你使用像jQuery这样的东西，这一切都会容易得多。但假设您只想使用javascript执行此操作，这是我的解决方案：

（注意：即使您使用jQuery，该技术与下面解释的技术非常相似）

FIDDLE：https://jsfiddle.net/Bintang/kvowcj6w/

var button = document.querySelector('.btn');
var button2 = document.querySelector('.btn2');
var container = document.querySelector('.container');
var area = document.querySelector('.area');

button.style.background = 'blue';
button2.style.background = 'blue';
container.style.backgroundColor = 'blue';

var slideCurrent = 0;
var slideTotal = Math.floor(container.offsetWidth / area.offsetWidth);
var slideWidth = area.offsetWidth;
var slideColors = ['blue', 'red', 'purple'];

button.onclick = function() {

  if (slideCurrent < slideTotal - 1) {
    var left = container.style.left;
    var leftInInteger = parseInt(left.replace("px", "")) || 0;
    container.style.left = (leftInInteger - slideWidth) + "px"
    slideCurrent += 1;

    //STYLING
    container.style.backgroundColor = slideColors[slideCurrent];
    button.style.backgroundColor = slideColors[slideCurrent];
    button2.style.backgroundColor = slideColors[slideCurrent];
  }

};
button2.onclick = function() {

  if (slideCurrent > 0) {
    var left = container.style.left;
    var leftInInteger = parseInt(left.replace("px", "")) || 0;
    container.style.left = (leftInInteger + slideWidth) + "px";
    slideCurrent -= 1;

    //STYLING
    container.style.backgroundColor = slideColors[slideCurrent];
    button.style.backgroundColor = slideColors[slideCurrent];
    button2.style.backgroundColor = slideColors[slideCurrent];
  }

};

说明：

而不是使用if＆amp; else设置＆＃34; left＆＃34;的具体值每一次你想要滑动，你想要做的是增加＆＃34; left＆＃34;的值。每次你想向左滑动＆amp;每次要向右滑动时减小值。（看下面的代码）

var slideCurrent = 0;
var slideTotal = Math.floor(container.offsetWidth / area.offsetWidth);
var slideWidth = area.offsetWidth;
var slideColors = ['blue', 'red', 'purple'];

button.onclick = function() {

  if (slideCurrent < slideTotal - 1) {
    var left = container.style.left;
    var leftInInteger = parseInt(left.replace("px", "")) || 0;
    container.style.left = (leftInInteger - slideWidth) + "px"
    slideCurrent += 1;

    //STYLING
    container.style.backgroundColor = slideColors[slideCurrent];
    button.style.backgroundColor = slideColors[slideCurrent];
    button2.style.backgroundColor = slideColors[slideCurrent];
  }

};

上面的代码是：

1.每次点击按钮，它都会检查当前幻灯片是否是最后一张幻灯片

if (slideCurrent < slideTotal - 1) {

2.如果它不是最后一张幻灯片，它将获得当前＆＃34;左＆＃34; ＆＃34;容器的价值＆＃34;那么它将删除＆＃34; px＆＃34;并将其从字符串转换为整数（使用parseInt()函数），但如果＆＃34;左＆＃34;属性尚未定义，它将被替换为＆＃34; 0＆＃34;

的值

var left = container.style.left;
var leftInInteger = parseInt(left.replace("px", "")) || 0;

3.现在它的当前值为＆＃34; left＆＃34;在整数中，它可以通过＆＃34;区域＆＃34;（顶部较小的元素）的宽度递减值，因此它将向右滑动并将slideCurrent变量递增一个

container.style.left = (leftInInteger - slideWidth) + "px"
slideCurrent += 1;

4.最后，它将设置＆＃34;容器的颜色＆＃34;到指定的颜色

//STYLING
container.style.backgroundColor = slideColors[slideCurrent];
button.style.backgroundColor = slideColors[slideCurrent];
button2.style.backgroundColor = slideColors[slideCurrent];

然后你可以反过来向另一个方向滑动。

循环的CSS / JS Slider问题

1 个答案: