javascript鼠标滚轮图像滚动
我试图使图片在鼠标滚轮上垂直滚动。 如何使在开始点时不向后滚动,从第一张图片滚动到最后一张图片,在最后一张图片时不进一步滚动javascript鼠标滚轮图像滚动,javascript,image,scroll,mousewheel,Javascript,Image,Scroll,Mousewheel,我试图使图片在鼠标滚轮上垂直滚动。 如何使在开始点时不向后滚动,从第一张图片滚动到最后一张图片,在最后一张图片时不进一步滚动 var myimages=[ "https://d248fncte96e1e.cloudfront.net/xs/0137.jpg", "https://d248fncte96e1e.cloudfront.net/xs/0138.jpg", "https://d248fncte96e1e.cloudf
var myimages=[
"https://d248fncte96e1e.cloudfront.net/xs/0137.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0138.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0139.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0140.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0141.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0142.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0143.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0144.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0145.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0146.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0147.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0148.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0149.jpg"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e //equalize event object
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
nextslideindex=(delta<=-120)? 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)
});
var myimages=[
"https://d248fncte96e1e.cloudfront.net/xs/0137.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0138.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0139.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0140.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0141.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0142.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0143.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0144.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0145.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0146.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0147.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0148.jpg",
"https://d248fncte96e1e.cloudfront.net/xs/0149.jpg"
]
var slideshow=document.getElementById(“slideshow”)
var nextslideindex=0
函数旋转图像(e){
var evt=window.event | | e//均衡事件对象
var delta=evt.detail?evt.detail*(-120):evt.wheeldta//delta在滚轮向上滚动时返回+120,向下滚动时返回-120
nextslideindex=(delta您需要检查数组中是否有下一个映像。这意味着在设置映像之前添加if语句,如果未定义,则返回第一个映像并重置计数器
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e //equalize event object
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
nextslideindex=(delta<=-120)? 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
if(myimages[nextslideindex] != undefined) {
slideshow.src=myimages[nextslideindex]
}
else {
slideshow.src=myimages[0]
nextslideindex = 0;
}
if (evt.preventDefault) //disable default wheel action of scrolling page
evt.preventDefault()
else
return false
}
var slideshow=document.getElementById(“slideshow”)
var nextslideindex=0
函数旋转图像(e){
var evt=window.event | | e//均衡事件对象
var delta=evt.detail?evt.detail*(-120):evt.wheeldta//delta在滚轮向上滚动时返回+120,向下滚动时返回-120
nextslideindex=(deltaIt只是对您要查找的内容的粗略猜测。我需要更多的代码才能使其完美工作,也许是一个活生生的示例。这是一个活生生的示例,当我到达最后一张图片时,我需要停止进一步操作(允许返回),而不是从第一张图片返回到最后一张。@DzaDze还有什么我可以帮助的吗?
nextslideindex=(nextslideindex<0)?...
var slideshow = document.getElementById("slideshow");
var nextslideindex = 0;
function rotateimage(e){
var evt = window.event || e; //equalize event object
var delta = evt.detail? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
nextslideindex = (delta <= -120)? nextslideindex + 1 : nextslideindex - 1 //move image index forward or back, depending on whether wheel is scrolled down or up
if(myimages[nextslideindex] != undefined) {
slideshow.src = myimages[nextslideindex];
}
else {
// You can put an alert or something here if you'd like
}
if (evt.preventDefault) //disable default wheel action of scrolling page
evt.preventDefault();
else
return false;
}