美好的一天。我有一个垂直滑动的旋转木马。我希望它由鼠标滚轮控制。有人可以帮我解决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在我的轮播中无法正常工作。
拜托我需要你的帮忙。先感谢您。
附言即时通讯使用的图片大小为1920 x 1020
最佳答案
首先为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');
}