javascript鼠标滚轮图像滚动
javascript mousewheel image scroll
我正在尝试让图片在鼠标滚轮上垂直滚动。如何使它在起点时不向后滚动,从第一张图片滚动到最后一张图片,而在最后一张照片时不进一步滚动?
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)
});
您需要检查数组中是否有下一个图像。这意味着在设置图像之前添加一个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
}
编辑
现在,我明白了你想要什么基于jsFiddle和评论。你只想阻止它走到最后。通过这种方式,只需添加一个if语句并删除行,就可以很容易地做到这一点
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;
}
相关文章:
- 使用 nameProp 的 JQuery 图像滚动更新在 Firefox 和 Chrome 中不起作用
- 使用javascript只滚动一个图像进行图像滚动
- 如何在jcarousel上进行图像滚动
- 固定图像滚动移动位置
- 如何制作图像滚动
- 带有onclick切换的Javascript图像滚动
- 基础 4 - 图像滚动以显示另一个图像
- 图像滚动淡入,完成后转到下一部分
- 使用图像滚动达到页面中的最大内容,然后应该使用窗口百分比隐藏图像
- 如何创建垂直图像滚动条
- 使用查询的水平图像滚动
- 如何将图像滚动添加到Javascript中
- javascript鼠标滚轮图像滚动
- 图像滚动<img>并且<a>事件
- 正在停止图像滚动paraScrolling
- jQuery - 文本和图像滚动效果不起作用
- Jquery插件图像滚动与前一个和下一个图像可见的一面
- 在没有实际文本触发的情况下,淡出/淡出图像滚动
- 动画图像滚动
- 如何使用JavaScript将图库和图像滚动条放在一个页面上