鼠標滾輪方向不起作用

在我的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

來源

2017-10-17 mr.tanmay

因爲我在你的代碼中看到你需要檢查條件 –

，但它作爲下一個圖像工作正常，但沒有做前一個按鈕 –

使用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>

來源

2017-10-17 11:13:19 H77

即使在你的代碼它不顯示coorectly..WH向上滾動顯示2後1不是5 –

你可以嘗試更新的代碼嗎？我不得不從事件處理程序中刪除事件參數。 – H77

完美答案來自您...非常感謝，您能告訴我如何控制滾動速度嗎？因爲它太快了，再次感謝:) –

鼠標滾輪方向不起作用

回答

相關問題