Всем привет! Есть очень удобный скрипт который просто листает кадры колёсиком мыши при наведении на кадр. Вот нужный пример: Код (Text): <img id="slideshow" src="img/0.jpg"/> <script type="text/javascript"> var nextslideindex = 1; var myimages=[ "img/0.jpg", "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg" ] var slideshow=document.getElementById("slideshow") function rotateimage(e){ var evt=window.event || e //equalize event object var delta=evt.detail? evt.detail*(-1) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries slideshow.src=myimages[nextslideindex] if (evt.preventDefault) //disable default wheel action of scrolling page evt.preventDefault() else return false } var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x if (slideshow.attachEvent) //if IE (and Opera depending on user setting) slideshow.attachEvent("on"+mousewheelevt, rotateimage) else if (slideshow.addEventListener) //WC3 browsers slideshow.addEventListener(mousewheelevt, rotateimage, false) </script> Помогите пожалуйста добавить функцию внешних кнопок. Чтобы две кнопки могли покадрово менять изображения, вперед и назад Код (Text): <button type="submit" id="prev">prev</button> <button type="submit" id="next">next</button>
Технически я просто продублировал функцию и кнопки работают как нужно... Но я понимаю что это не правильно копировать целую функцию и можно как-то уменьшить код просто вызвав из основной функции... Код (Javascript): var prevButton=document.getElementById("prevButton"); var nextButton=document.getElementById("nextButton"); function rotateimageprev(){ //alert("Слайд назад"); var evt=window.event || e var delta=evt.detail? evt.detail*(+1) : evt.click nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries slideshow.src=myimages[nextslideindex] if (evt.preventDefault) //disable default wheel action of scrolling page evt.preventDefault() else return false } function rotateimagenext(){ //alert("Слайд вперед"); var evt=window.event || e var delta=evt.detail? evt.detail*(-1) : evt.click nextslideindex=(delta<=-1)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries slideshow.src=myimages[nextslideindex] if (evt.preventDefault) //disable default wheel action of scrolling page evt.preventDefault() else return false } prevButton.addEventListener("click", rotateimageprev); nextButton.addEventListener("click", rotateimagenext); Кнопки: HTML: <button type="submit" id="prevButton">prev</button> <button type="submit" id="nextButton">next</button>
Не получится убрать две.... Если только одну... на кнопках: var delta=evt.detail? evt.detail*(-1) : evt.click var delta=evt.detail? evt.detail*(+1) : evt.click А есть вариант вписать в одну функцию поддержку кнопок?
Вместо +1 и -1 подставить переменную n. Код (Javascript): function rotateimage(n){ //код var delta=evt.detail? evt.detail*(n) : evt.click; //код } prevButton.addEventListener("click", rotateimage(-1)); nextButton.addEventListener("click", rotateimage(1));