javascript - 鼠标滚轮方向不起作用

标签 javascript jquery html css twitter-bootstrap

在我的 html 中，我集成了卡片，它由鼠标滚轮控制问题是，当我滚动鼠标时，它显示下一张卡片，这很好，但当我向上滚动时，它不会更改为前一张卡片。 向上滚动 1->5->4->3->2->1 时的预期结果 向上滚动 1->2->3->4->5->6

flag = 1;
$("body").mousewheel(function() {

  if (flag == 0) {
    $("#side1").css("z-index", "999");
    $("#side2").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("transform", "translateX(0px) scale(1.5)");
    $("#side2").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(100px)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    flag = 1;


  } else if (flag == 1) {
    $("#side2").css("z-index", "999");
    $("#side1").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");

    $("#side2").css("transform", "translateX(0px) scale(1.5)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    $("#side3").css("transform", "translateX(100px)");


    flag = 2;

  } else if (flag == 2) {

    $("#side3").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side3").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");


    flag = 3;

  } else if (flag == 3) {
    $("#side4").css("z-index", "999");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side4").css("transform", "translateX(0px) scale(1.5)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

    flag = 4;
  } else if (flag == 4) {
    $("#side5").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side5").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

    flag = 0;
  }

});
#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

#side1 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(0px) scale(1.5);
  z-index: 99;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side2 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(-100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side3 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side4 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(110px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side5 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div id="side1">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div id="side2">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div id="side3">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div id="side4">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div id="side5">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

Fiddle

最佳答案

使用event.deltaY来识别滚动方向。

例如

if (event.deltaY < 0)
    flag--;
  else
    flag++;

固定代码:

var flag = 1;
var delta = 0;

$("body").mousewheel(function() {
  delta += event.deltaY;

  if (Math.abs(delta) < 500)
    return;

  delta = 0;

  if (event.deltaY < 0)
    flag--;
  else
    flag++;

  if (flag < 1)
    flag = 5;
  else if (flag > 5)
    flag = 1;

  if (flag == 1) {
    $("#side1").css("z-index", "999");
    $("#side2").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("transform", "translateX(0px) scale(1.5)");
    $("#side2").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(100px)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");

  } else if (flag == 2) {
    $("#side2").css("z-index", "999");
    $("#side1").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");

    $("#side2").css("transform", "translateX(0px) scale(1.5)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    $("#side3").css("transform", "translateX(100px)");

  } else if (flag == 3) {

    $("#side3").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side3").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  } else if (flag == 4) {
    $("#side4").css("z-index", "999");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side4").css("transform", "translateX(0px) scale(1.5)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  } else if (flag == 5) {
    $("#side5").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side5").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  }

});
#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

#side1 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(0px) scale(1.5);
  z-index: 99;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side2 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(-100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side3 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side4 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(110px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side5 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div id="side1">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div id="side2">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div id="side3">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div id="side4">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div id="side5">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

更新: 更简单的解决方案:

var delta = 0;
$("body").mousewheel(function() {
  delta += event.deltaY;

  if (Math.abs(delta) < 500)
    return;
    
  delta = 0;
  var $slide = $(".slide.active").removeClass("active");
  var $newSlide = event.deltaY < 0 ? $slide.prev() : $slide.next();
  if (!$newSlide.length) {
    $newSlide = event.deltaY < 0 ? $slide.siblings().last() : $slide.siblings().first();
  }
  $newSlide.css("transform", "").addClass("active");
  $newSlide.prevAll().css("transform", "translateX(-100px) scale(1)");
  $newSlide.nextAll().css("transform", "translateX(100px)");
});
#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

.slide {
  height: 200px;
  width: 350px;
  position: absolute;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
  z-index: 9;
}

.slide.active {
  z-index: 99;
  transform: translateX(0px) scale(1.5);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div class="slide active">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div class="slide">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

关于javascript - 鼠标滚轮方向不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46788466/

上一篇：html - 在很多元素中使用 !important 可以吗？如果不是如何解决这个问题

下一篇：javascript - 在页面上安装脚本

相关文章：

javascript - 我们可以使用具有访问级别权限的 algolia 搜索吗

javascript - 如何在 Pycharm/Intellij 中打印到 javascript 控制台

javascript - 如何使用 Bootstrap 模式检查先决条件？

html 和 css 格式化

html - 表格单元格高度 - 是否也有一些必须遵守的最小尺寸？

javascript - Rails 应用程序中的无限滚动

javascript - GPT - 在关键值广告位中展示的非关键值广告

javascript - 提交按钮无法使用 JavaScript 验证表单

c# - MVC : Pagination hindering the way a list is sorted

html - 是否有任何 Web 布局范例可以使 CSS 少一点……不可预测？

©2024 IT工具网  联系我们