function ScrollSlider(ele, height, speed) {
var curIndex = 0;
var maxIndex = 0;
var scrollHeight = height;
var slider = $('#container ul').eq(0);
maxIndex = $(slider).find("li").length - 1;
$('#container').on('DOMMouseScroll mousewheel', function (e) {
if (!$(slider).is(":animated")) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
if (curIndex < maxIndex) {
$(slider).animate({
top: '-=' + scrollHeight + 'px'
}, speed);
curIndex++;
} else {
return true;
}
} else {
if (curIndex > 0) {
$(slider).animate({
top: '+=' + scrollHeight + 'px'
}, speed);
curIndex--;
} else {
return true;
}
}
}
return false;
});
}
ScrollSlider("container", 300, 500);
<title>Scroller</title>
<script>
$(document).ready(function() {
ScrollSlider("container", 300, 500);
});
</script>
<body>
<div id="container" class="scrollslider">
<ul>
<li>
<img src="http://placehold.it/600x150" />
</li>
<li>
<img src="http://placehold.it/600x250" />
</li>
<li>
<img src="http://placehold.it/600x150" />
</li>
<li>
<img src="http://placehold.it/600x50" />
</li>
</ul>
</div>
.scrollslider {
position:relative;
overflow:hidden;
}
.scrollslider img {
width:100%;
height:100%;
}
.scrollslider ul {
padding:0px;
margin:0px;
position:relative;
}
.scrollslider li {
list-style-type:none;
display:inline-block;
}
html, body {
margin:0px;
padding:0px;
}
#container {
width:600px;
height:300px;
border:1px solid #000;
top:100px;
margin:0 auto;
}