可滾動的引導輪/滑塊

Question

美好的一天。 我有一個垂直滑動的旋轉木馬。 我希望它由鼠標滾輪控制。 有人可以幫我解決它的JS嗎？

這是標記

 $('#carousel').bind('mousewheel', function(e){$(this).carousel('next');}); 

 <style> <!-- html, body { height: 100%; padding: 0; margin: 0; } body { background: #fff; min-height: 600px; } body * { font-family: Arial, Geneva, SunSans-Regular, sans-serif; font-size: 14px; color: #666; line-height: 22px; }--> #wrapper { width: 100%; min-width: 900px; height: 500px; position: relative; left: 0; } #carousel div { height: 100%; float: left; } #carousel img { min-width: 100%; min-height: 100%; } </style> <style type="text/css"> .carousel-inner.vertical { height: 100%; } /*.carousel .item img {*/ /*margin: 0 auto;*/ /* Align slide image horizontally center */ /*}*/ .carousel-inner.vertical > .item { -webkit-transition: .6s ease-in-out top; -o-transition: .6s ease-in-out top; transition: .6s ease-in-out top; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner.vertical > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .carousel-inner.vertical > .item.next, .carousel-inner.vertical > .item.active.right { top: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .carousel-inner.vertical > .item.prev, .carousel-inner.vertical > .item.active.left { top: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .carousel-inner.vertical > .item.next.left, .carousel-inner.vertical > .item.prev.right, .carousel-inner.vertical > .item.active { top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .carousel-inner.vertical > .active { top: 0; } .carousel-inner.vertical > .next, .carousel-inner.vertical > .prev { top: 0; height: 100%; width: auto; } .carousel-inner.vertical > .next { left: 0; top: 100%; } .carousel-inner.vertical > .prev { left: 0; top: -100%; } .carousel-inner.vertical > .next.left, .carousel-inner.vertical > .prev.right { top: 0; } .carousel-inner.vertical > .active.left { left: 0; top: -100%; } .carousel-inner.vertical > .active.right { left: 0; top: 100%; } </style> 

  <div id="wrapper"> <!-- wrap @img width --> <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> <li data-target="#carousel" data-slide-to="3"></li> <li data-target="#carousel" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner vertical" role="listbox"> <div class="item active"> <img src="img/image1.jpg" alt="First Slide" /> </div> <div class="item"> <img src="img/image2.jpg" alt="Second Slide" /> </div> <div class="item"> <img src="img/image3.jpg" alt="Third Slide" /> </div> <div class="item"> <img src="img/image4.jpg" alt="Forth Slide" /> </div> <div class="item"> <img src="img/image5.jpg" alt="Fifth Slide" /> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> 

請給我有關我的問題的任何建議。 我試圖在Google和此網站上進行搜索，但是JS在我的輪播中無法正常工作。

拜托我需要你的幫忙。 先感謝您。

PS我使用的圖像大小為1920 x 1020

Answer 1

首先為Mousewheel動作添加一個偵聽器：

var carousel = document.getElementById("carousel");
if (carousel.addEventListener) {
    // IE9, Chrome, Safari, Opera
    carousel.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    carousel.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else carousel.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler() {
$('#carousel').carousel('next');
}