使用Javascript制作幻灯片_Javascript_Html_Css

使用Javascript制作幻灯片

javascript html css

使用Javascript制作幻灯片,javascript,html,css,Javascript,Html,Css,我的目标是制作幻灯片。我这里只有一张图片，打算以后再使用 <!DOCTYPE html> <html onmousedown='event.preventDefault();'> <head> <title> Slides </title> <meta charset='utf-8'> <style> table{ margin: 1.5in; } .arrow{ color: blue; curs

我的目标是制作幻灯片。我这里只有一张图片，打算以后再使用

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Slides </title>
<meta charset='utf-8'>
<style>

 table{
 margin: 1.5in;
 }

.arrow{
 color: blue;
 cursor: pointer;
 }

对于图像元素本身，我没有留边距，是100%宽，有一个1像素的纯黑色边框

 #image{
 width: 100%;
 border: solid 1px;
 border-color: black;
 }
</style>
<script>

#图像{
宽度：100%；
边框：实心1px；
边框颜色：黑色；
}

我想制作两个全局图，“图像”和“imgidx”。 -images—一个数组，以字符串形式填充images目录中的图像路径

-imgidx-最初设置为0的数字

接下来我想填写以下函数

-增加或减少imgidx

-将img元素（由id“img”标识）上的“src”属性设置为images[imgidx]处的图像。如果imgidx大于images数组中的图像数，则它应返回到零。如果它低于零，则应设置为小于数组长度的1

function previmg() {
}
function nextimg() {
}
</script>
</head>
<body>
<table>
<tr>
<!-- Clicking on the arrows should change the image being displayed: -->
<td class='arrow' onclick='previmg();'> &#171;
<td class='image'><img id='img' src='https://img-9gag-fun.9cache.com/photo/appxzbM_460s.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

函数previmg（）{
}
函数nextimg（）{
}
«
»

我猜您增加的变量是

imgidx

，那么您应该使用以下计算：

上

下一个

以下是它如何工作的一些示例：

//imgidx is 9, images.length is 10
//user click on next
imgidx += 1;//here imgidx is 10
imgidx %= images.length;//10%10 is 0, back to zero \o/

//img idx为0，images.length为10
//用户点击上一页
imgidx-=1//这里imgidx是-1
imgidx%=images.length//-1%10等于-1
imgidx+=（imgidx<0）？图像。长度：0//-1+10=9，“最后一张”图像

我根据您的需要制作了一个小幻灯片

也许我能帮你。。按钮不工作，但已预配置

$（'.arrowLeft'）。在（'click'，函数（）{
//你的密码在这里
});
$（'.arrowRight'）。在（'click'，函数（）{
//你的密码在这里
});
.arrow左{
z指数：100；
位置：固定；
宽度：50px；
高度：50px；
最高：50%；
左：10%；
背景色：红色；
}
A.对{
z指数：100；
位置：固定；
宽度：50px；
高度：50px；
最高：50%；
右：10%；
背景色：红色；
}
.阿罗{
颜色：蓝色；
光标：指针；
}
.img{
高度：540px；
宽度：640px；
位置：相对位置；
}
img{
位置：固定；
最高：0%；
左：20%；
宽度：60%；
边框：实心1px；
边框颜色：黑色；
}
只需根据单击的方向更改img
src，使用图像索引确定src应指向的位置

var图像=[]http://placehold.it/300x150?text=Image1', 'http://placehold.it/300x150?text=Image2', 'http://placehold.it/300x150?text=Image3'];
var指数=0；
var the_image=document.getElementById（“主图像”）；
_image.src=images[0]；
功能显示图像（方向）
{
如果（方向=“左”）
{
索引--；
}
其他的
{
索引++；
index%=images.length；
}
如果（指数<0）
{
索引=images.length-1；
}
_image.src=images[index]；
}

那么，您是想更改img的src，还是想让图像四处移动？我计划稍后将代码重新用于不同的图像。我希望能够前进和后退。你是想拥有更多的img
，还是仅仅拥有一个img
，它根据你点击的箭头改变其src？我计划至少拥有8张图像。我不确定将图像放入函数中的最佳方式，但我希望在单击下一个箭头后将其更改为下一个图像，然后在最后换回第一个图像。所以12345678-->12345678我要问的是执行中的差异。基本上，只有一个图像并更改src意味着图像将只是重新加载，而有多个图像将为您提供创建滑动动画和类似抓拍的选项！从0开始，它需要这样包装。是的，基本数学。显然编程语言标准想要违反数学规则。。。JS使（-1）%10=-1，这在数学上是毫无意义的（除非你做错了，否则不能有负余数）。因此，我更新了我的答案。请向我解释1%10
是1，而-1%10
是9。你知道模的作用吗？等等，-1≡-1%10，nvm我的坏现在有意义了：@检查你的代码，你的按钮不工作。或者至少，抛出错误如果你能提交完整的代码（就像它实际工作时一样）并检查它会更好！只有在点击时，OP可以自行设置不同的行为时，它才被预先配置。这仍然是一个不完整的答案，因为您还没有显示任何版本的完整答案。如果你可以让左/右按钮显示上一张/下一张幻灯片，这将值得投票。这不起作用。我可以用我的？@HTMLnoob替换div吗？@HTMLnoob是的，不管你把它放在什么容器中，只要确保你有某种方法来识别你的img
，例如id。我只是懒，太棒了！非常感谢！
imgidx -= 1;
imgidx %= images.length;

imgidx += 1;
imgidx %= images.length;

//imgidx is 9, images.length is 10
//user click on next
imgidx += 1;//here imgidx is 10
imgidx %= images.length;//10%10 is 0, back to zero \o/

//img idx is 0, images.length is 10
//user click on prev
imgidx -= 1;//here imgidx is -1
imgidx %= images.length;//-1%10 is -1
imgidx+=(imgidx < 0)?images.length:0;//-1 + 10 = 9, the "last" image