如何在 html 中创建图像幻灯片？
Posted
技术标签:
【中文标题】如何在 html 中创建图像幻灯片？【英文标题】：How to create image slideshow in html? 【发布时间】：2012-12-01 09:23:50 【问题描述】：我想在我的网络上制作图片幻灯片，这是我的代码
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" name="slide" /></p>
<script type="text/javascript">
function slideit()
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500)
slideit()
</script>
</body>
为什么它不起作用？我已将我想要的图像放入 images 文件夹中
【问题讨论】：
你已经声明了函数 slideit()，但是你没有在任何地方调用它。; 在每一行的末尾丢失
@Matthias slideit() 在声明之后被调用
@AbhishekBhatia 我所知道的是脚本语言不需要任何； cmiiw :)
完成，只需将 var step 从函数中移出
【参考方案1】：
-
通过将 var step=1 置于函数调用之上，将其设置为全局变量
放分号
看起来像这样
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
slideit();
</script>
</body>
【讨论】：
那么如何将滑块绑定到点击呢？这样用户就可以滚动浏览它而不必等待计时器？【参考方案2】：你可以使用jquery插件而不是从头开始编写代码。这样的插件也可以提供许多配置选项。
这是我最喜欢的一个。
http://www.zurb.com/playground/orbit-jquery-image-slider
【讨论】：
您不必学习 jquery 即可使用此插件。只需按照解释清楚的说明进行操作即可。这么多就够了。以上是关于如何在 html 中创建图像幻灯片？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用引导程序和 for 循环在 django 中创建电影片段？