Я хочу прокручивать содержимое страницы на прокрутке мыши. У меня есть 5 изображений на странице, одновременно я хочу показать одно изображение на экране. Если я прокручиваю вниз, показано второе изображение, если нужно прокрутить предыдущее изображение. Как мудрый до последнего изображения. Я попробовал пример, но понятия не имею, как добиться этого.
JavaScript:
var winHeight = $(window).height();
var prevHeight = 0;
var scrollCount = 0;
var docHeight = $(document).height();
$(document).ready(function(){
$(window).scroll(function(e){
console.log("in scroll top");
var top = $(window).scrollTop();
console.log("top - "+top);
if(top !=0 && top != docHeight){
if(top > prevHeight){
scrollCount = scrollCount+1;
}else{
scrollCount = scrollCount-1;
}
console.log("scroll count="+scrollCount);
$(window).scrollTop(winHeight*scrollCount);
prevHeight = top;
if(scrollCount < 0){
scrollCount = 0;
}
e.preventDefault();
}
});
Мой пример здесь http://jsbin.com/iwOsiFIY/1/
Просто установите поля для того, что вы хотите, чтобы они были для каждого изображения в CSS. Или обходным путем является добавление кучи "р" тегов в HTML без добавления абзаца, первый способ - лучший. Возможно, вам понадобится JavaScript для изменения размера.