Javascript 将“自动图像”滑块更改为“链接单击”滑块
我想将此图像滑块更改为onclick滑块。 这个滑块是自动滑动的。我需要通过单击链接来滑动每个图像 演示Javascript 将“自动图像”滑块更改为“链接单击”滑块,javascript,css,Javascript,Css,我想将此图像滑块更改为onclick滑块。 这个滑块是自动滑动的。我需要通过单击链接来滑动每个图像 演示 按如下方式更改您的javascript: (function(){ document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx"; //remove the part that was auto-advancing the images on a timer
按如下方式更改您的javascript:
(function(){
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
//remove the part that was auto-advancing the images on a timer
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1;
//set the ken burns function to go when you click "slideshow"
slideshow.onclick=function kenBurns() {
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
})();
编辑: 与ken burns效果代码不同的是,您每次都必须删除效果,而ken burns效果代码只能在图像通过后删除效果。这样,无论你点击链接的顺序如何,每次都能看到效果
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
var images = document.getElementById('slideshow').getElementsByTagName('img');
//no longer need i
numberOfImages = images.length;
//this variable is passed in by the button clicked.
window.kenBurns = function (imageNum){
//using variable to choose image
images[imageNum].className = "fx";
//a for loop to remove 'fx' class from all images except the current one.
for(var i=0;i<numberOfImages;i++){
if(i===imageNum){ i++}
images[i].className = "";
}
};
谢谢,但是如何添加此链接。这张幻灯片点击图片,添加链接是什么意思?当有人单击链接时,是否希望幻灯片发生更改?或者您希望将特定链接更改为特定图像?我希望将特定链接更改为特定图像编辑以回答您的问题。如果有帮助,请确保将其作为此问题的答案。
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
var images = document.getElementById('slideshow').getElementsByTagName('img');
//no longer need i
numberOfImages = images.length;
//this variable is passed in by the button clicked.
window.kenBurns = function (imageNum){
//using variable to choose image
images[imageNum].className = "fx";
//a for loop to remove 'fx' class from all images except the current one.
for(var i=0;i<numberOfImages;i++){
if(i===imageNum){ i++}
images[i].className = "";
}
};
<a href="javascript:kenBurns(0);">link1</a>
<a onclick="kenBurns(1);" href="javascript:void(0);">link2</a>