JQuery Scrollto

Question

Я пытаюсь выяснить, как заставить это прокручиваться вертикально. У меня все на месте .. это точно такой же скрипт, который прокручивает по горизонтали. Я чувствую, что в коде jquery есть что-то, что мне нужно, но я не могу найти хорошего объяснения этому.

вот моя ссылка, над которой я работаю.

http://www.chohoh.com/pcs/scroll.html

Answer 1

В этом решении я включил плагин jQuery mousewheel ... Мне не нравится, когда меня ограничивают только нажатия кнопок: P

Кроме того, я не использовал плагин последовательной прокрутки

<script type="text/javascript"> 
$(document).ready(function() {
var slideIndex = 0;
var slideBlock = $('.tikt-txt');
var slideMax = slideBlock.length - 13; // leaves 13 slides showing in the window

$('.galprev').click(function(){
 slideIndex--;
 changeSlide();
});
$('.galnext').click(function(){
 slideIndex++;
 changeSlide();
});
$('#slideshow').bind('mousewheel', function(e,d){
 var speed = Math.floor(Math.abs(d));
 if (d > 0) {
   slideIndex = slideIndex - speed; 
 } else {
   slideIndex = slideIndex + speed; 
 }
 changeSlide();
});

function changeSlide(){
 if (slideIndex > slideMax) {
  slideIndex = slideMax;
 }
 if (slideIndex < 0) {
  slideIndex = 0;
 }
 $('#slideshow').stop().scrollTo(slideBlock[slideIndex],300) 
}
});
</script>

---

Редактировать: Я постараюсь объяснить все это ... Я надеюсь, что вы можете следить за моей болтовней LOL

Переменные

• Самый верхний элемент div индексируется и получает ноль с помощью slideIndex.
• slideBlock - это массив, содержащий все ваши слайды.
• Переменная slideMax принимает общее количество slideBlock минус количество слайдов, видимых на экране за один раз (в нашем случае 13)

События

• Эти функции вызываются при нажатии на предыдущую или следующую кнопку
• Эти функции добавляют или убирают ОДНО из индекса (++ означает добавление одного и - означает вычитание одного)
• Затем они вызывают функцию для перемещения слайдов.
• Функция mousewheel использует плагин mousewheel, чтобы связать движение колеса и вычислить, как далеко перемещать слайды вверх или вниз, скорость, с которой вы вращаете колесо мыши, определяет, сколько оно прокручивает

Функция ScrollTo (changeSlide)

• Эта функция определяет, прокручивали ли вы максимальное число слайдов (слишком далеко вниз) или ниже минимума (слишком далеко вверх), затем она соответствующим образом устанавливает число, равное максимальной или минимальной позиции
• Теперь он останавливает любую анимацию .stop() и вызывает функцию scrollTo и сообщает ей, какой номер слайда должен отображаться в верхней части окна (slideIndex) и сколько времени нужно, чтобы прокрутить это расстояние.

Итак, если вы все это прочитали и все еще чесаете голову ... измените:

slideIndex++ до slideIndex=slideIndex+7;

и

slideIndex-- до slideIndex=slideIndex-7;

Answer 2

Ну, в качестве альтернативы, вы можете выбрать все элементы с классом 'tikt-txt' и затем имитировать функцию прокрутки, выполняя анимацию, которая перемещает элементы, изменяя top на -10px (для прокрутки вниз) и 10px (для прокрутки вверх ).

Предполагается, что вы позиционировали класс 'tikt-txt' относительно.

EDIT:

Простой пример, с которого можно начать:

$('.galnext').click(function() {
   $('.tikt-txt').animate({ "top": "-=10px" }, "100");
});

$('.galprev').click(function() {
   $('.tikt-txt').animate({ "top": "+=10px" }, "100");
});

Просто убедитесь, что вы изменили scroll2.css и заменили:

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; }

С

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; position:relative; }