gpt4 book ai didi

带有鼠标按住循环的 JavaScript 库

转载 作者:行者123 更新时间:2023-11-30 05:41:36 27 4
gpt4 key购买 nike

所以我得到了这个画廊脚本并且它工作正常,但我试图导入 onMousedown 函数,所以当我单击并按住“下一个”或“上一个”链接时,图像一直在循环变化,直到我释放链接

<html>

<head>

<script type='text/javascript'>


var imageGallery = [
"img1.jpg" ,
"img2.jpg" ,
"img3.jpg",
"img4.jpg"
];

var imgCount = 0;
var totalImgs = imageGallery.length - 1;

function next() {
imgCount++ ;
if(imgCount > totalImgs) imgCount = 0

document.getElementById("gallery").src = imageGallery[imgCount] ;
}

function previous() {
imgCount--;
if(imgCount < 0) imgCount = totalImgs ;
document.getElementById("gallery").src = imageGallery[imgCount] ;
}

</script>

</head>

<body>

<a href="#" onMousedown="next(); return false;">Next</a>
<a href="#" onMousedown="previous(); return false;">Back</a>
<img id="gallery"src="img1.jpg"style="height:420px;width:744px">

</body>

</html>

最佳答案

您可以尝试以这种方式 Hook mousehold:

  • 在mouseDown事件函数中设置一个时间间隔并立即执行;在间隔内进行上一个/下一个 Action
  • window.onmouseup事件函数中清除间隔

考虑删除内联事件绑定(bind)..

HTML:

<a href="#" onMousedown="next(); return false;">Next</a>

<a href="#" onMousedown="previous(); return false;">Back</a>

<img id="gallery" src="http://placehold.it/350x150" style="height:420px;width:744px">

代码:

var imageGallery = [
"http://placehold.it/350x150",
"http://placehold.it/350x250",
"http://placehold.it/350x350",
"http://placehold.it/350x450"];

var imgCount = 0;
var totalImgs = imageGallery.length - 1;
var timer;

function next() {
timer = setInterval(function fn() {
imgCount++;
if (imgCount > totalImgs) imgCount = 0

document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 500)
}

function previous() {
timer = setInterval(function fn() {
console.log('prev')
imgCount--;
if (imgCount < 0) imgCount = totalImgs;
document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 500)
}

function stopInterval() {
clearInterval(timer)
}

window.onmouseup = stopInterval;

演示:http://jsfiddle.net/T42jj/

关于带有鼠标按住循环的 JavaScript 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20521201/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com