多个图像的 HTML 图像幻灯片放映
html image slide show for multiple images
我刚刚陷入了创建图像滑块的问题。此图像滑块外壳处理每个事件的不同图像。但目前,即使是滑块也不起作用。
< script type = "text/javascript" >
var image1 = new Image()
image1.src = "/images/AchernerBogenclubTitel.jpg"
var image2 = new Image()
image2.src = "images/P1220966.JPG" < /script>
<div class="boxInner" class="bw pic">
<img src="/images/turnierbilder/2015/LMH2015_SGVillingen_markus_norbert.jpg" name="slide" />
<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>
我的两个代码都在同一个文件中。
我还尝试使用不同的poache:
<td>
<center>
<p style="font-size:12px ">
<a href="/docs/landesmeisterschafthallesbsv2015.pdf">
<script type="text/javascript">
<!-->
var image1 = new Image()
image1.src = "LMH2015_SGVillingen_P1220967.jpg"
var image2 = new Image()
image2.src = "LMH2015_SGVillingen_P1220971.jpg"
var image3 = new Image()
image3.src = "LMH2015_SGVillingen_P1220973.jpg"
var image4 = new Image()
image4.src = "LMH2015_SGVillingen_P1220977.jpg"
var image5 = new Image()
image5.src = "LMH2015_SGVillingen_P1220985.jpg"
//-->
</script>
</head>
<body>
<img name="slide" width="310" height="222">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 5)
step++
else
step = 1
setTimeout("slideit()", 5000)
}
slideit()
//-->
</script>
这个工作得很好,但我似乎无法让它在同一页面上的多个组上运行(如果有办法解决问题,我宁愿使用此代码)
你有 en 理解错误 关于选择器,试试这个:
<div class="boxInner" class="bw pic">
<img src="" id="slide" />
</div>
<script type = "text/javascript" >
var image1 = new Image();
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";
var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";
var step = 1;
function slideit() {
document.getElementById('slide').src = eval("image" + step + ".src");
if (step < 2)
step++;
else
step = 1;
setTimeout("slideit()", 2500);
}
slideit();
</script>
带数组的版本:
<script type = "text/javascript" >
var image1 = new Image();
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";
var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";
var images = [image1,image2];//here i create an array "images" with two elements "image1" and "image2"
var step = 0;//step is now 0 because 1st index of an array is 0
function slideit() {
document.getElementById('slide').src = images[step].src;//i want read index n of my array
if (step < (images.length-1))//lenght give number of element in this array
step++;
else
step = 0;
setTimeout("slideit()", 2500);
}
slideit();
</script>
包含 2 张图片的版本:
<div class="boxInner" class="bw pic">
<img src="" id="slide1" />
<img src="" id="slide2" />
</div>
<script type = "text/javascript" >
var image1 = new Image();
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg";
var image2 = new Image();
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg";
var image3 = new Image();
image3.src = "http://media.virginradio.fr/article-2505914-fb-f1415609183/chat-mignon-petit-chaton-therapie-detente.jpg";
var image4 = new Image();
image4.src = "http://media.meltydiscovery.fr/article-2927858-fb/chat-chaton-chats-biso-le-caire-egypte-metro.jpg";
var images = [image1,image2,image3,image4];
var step = 0;//step is now 0 because 1st index of an array is 0
function slideit() {
document.getElementById('slide1').src = images[step].src;
document.getElementById('slide2').src = images[step+1].src;
if (step < (images.length-1)/2)
step=step+2;
else
step = 0;
setTimeout("slideit()", 2000);
}
slideit();
</script>
相关文章:
- jQuery图像幻灯片,在停止后淡出到第一张图像
- 为什么我的图像幻灯片不起作用
- Javascript图像幻灯片;不起作用
- 将视差与图像幻灯片一起使用
- wordpress插件中的jQuery图像幻灯片
- 当我们使用JavaScript点击下一个或上一个按钮时,图像幻灯片播放计时器的速度会加快
- JavaScript循环图像幻灯片
- 简单的HTML图像幻灯片
- 向上一个/下一个图像幻灯片添加计数器(仅限javascript/css)
- 如何使Javascript图像幻灯片缓慢更改图像
- Javascript图像幻灯片
- 我的图像幻灯片代码有什么问题
- 为什么jQuery图像幻灯片在Netbeans中不起作用
- 如何显示来自 mysql 数据库的图像幻灯片
- 更改图像幻灯片放映幻灯片中的图像
- 使用计时器制作图像幻灯片
- 多个图像的 HTML 图像幻灯片放映
- Jquery setTimeout 不起作用(图像幻灯片)
- 使用JavaScript更改背景图像图像以进行图像幻灯片
- 如何制作循环图像幻灯片