За последние 24 часа нас посетили 22645 программистов и 1011 роботов. Сейчас ищут 717 программистов ...

Помогите подключить кнопки

Тема в разделе "JavaScript и AJAX", создана пользователем skorpion, 7 фев 2023.

  1. skorpion

    skorpion Активный пользователь

    С нами с:
    6 фев 2011
    Сообщения:
    56
    Симпатии:
    1
    Адрес:
    Москва
    Всем привет!
    Есть очень удобный скрипт который просто листает кадры колёсиком мыши при наведении на кадр.
    Вот нужный пример:

    Код (Text):
    1. <img id="slideshow" src="img/0.jpg"/>
    2.  
    3. <script type="text/javascript">
    4. var nextslideindex = 1;
    5. var myimages=[
    6.     "img/0.jpg",
    7.     "img/1.jpg",
    8.     "img/2.jpg",
    9.     "img/3.jpg",
    10.     "img/4.jpg",
    11.     "img/5.jpg",
    12.     "img/6.jpg"
    13. ]
    14. var slideshow=document.getElementById("slideshow")
    15. function rotateimage(e){
    16.     var evt=window.event || e //equalize event object
    17.     var delta=evt.detail? evt.detail*(-1) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    18.     nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    19.     nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    20.     slideshow.src=myimages[nextslideindex]
    21.     if (evt.preventDefault) //disable default wheel action of scrolling page
    22.         evt.preventDefault()
    23.     else
    24.         return false
    25. }
    26. var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
    27. if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
    28.     slideshow.attachEvent("on"+mousewheelevt, rotateimage)
    29. else if (slideshow.addEventListener) //WC3 browsers
    30.     slideshow.addEventListener(mousewheelevt, rotateimage, false)
    31.  
    32. </script>
    Помогите пожалуйста добавить функцию внешних кнопок.
    Чтобы две кнопки могли покадрово менять изображения, вперед и назад

    Код (Text):
    1.  
    2.         <button type="submit" id="prev">prev</button>
    3.         <button type="submit" id="next">next</button>
     
  2. skorpion

    skorpion Активный пользователь

    С нами с:
    6 фев 2011
    Сообщения:
    56
    Симпатии:
    1
    Адрес:
    Москва
    Технически я просто продублировал функцию и кнопки работают как нужно... Но я понимаю что это не правильно копировать целую функцию и можно как-то уменьшить код просто вызвав из основной функции...
    Код (Javascript):
    1. var prevButton=document.getElementById("prevButton");
    2. var nextButton=document.getElementById("nextButton");
    3.  
    4. function rotateimageprev(){
    5. //alert("Слайд назад");
    6. var evt=window.event || e
    7. var delta=evt.detail? evt.detail*(+1) : evt.click
    8. nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    9.     nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    10.     slideshow.src=myimages[nextslideindex]
    11.     if (evt.preventDefault) //disable default wheel action of scrolling page
    12.         evt.preventDefault()
    13.     else
    14.         return false
    15. }
    16.  
    17. function rotateimagenext(){
    18. //alert("Слайд вперед");
    19. var evt=window.event || e
    20. var delta=evt.detail? evt.detail*(-1) : evt.click
    21. nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    22.     nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    23.     slideshow.src=myimages[nextslideindex]
    24.     if (evt.preventDefault) //disable default wheel action of scrolling page
    25.         evt.preventDefault()
    26.     else
    27.         return false
    28. }
    29.  
    30. prevButton.addEventListener("click", rotateimageprev);
    31. nextButton.addEventListener("click", rotateimagenext);
    Кнопки:

    HTML:
    1.         <button type="submit" id="prevButton">prev</button>
    2.         <button type="submit" id="nextButton">next</button>
     
  3. antoniii

    antoniii Активный пользователь

    С нами с:
    16 мар 2022
    Сообщения:
    417
    Симпатии:
    71
    Назначь одну и ту же функцию обеим кнопкам, а в коде тогда убери две лишние.
     
  4. skorpion

    skorpion Активный пользователь

    С нами с:
    6 фев 2011
    Сообщения:
    56
    Симпатии:
    1
    Адрес:
    Москва
    Не получится убрать две....
    Если только одну...

    на кнопках:

    1. var delta=evt.detail? evt.detail*(-1) : evt.click
    1. var delta=evt.detail? evt.detail*(+1) : evt.click
    А есть вариант вписать в одну функцию поддержку кнопок?
     
  5. antoniii

    antoniii Активный пользователь

    С нами с:
    16 мар 2022
    Сообщения:
    417
    Симпатии:
    71
    Вместо +1 и -1 подставить переменную n.
    Код (Javascript):
    1. function rotateimage(n){
    2. //код
    3.       var delta=evt.detail? evt.detail*(n) : evt.click;
    4. //код
    5. }
    6. prevButton.addEventListener("click", rotateimage(-1));
    7. nextButton.addEventListener("click", rotateimage(1));