Javascript和HTML幻灯片

Question

我将这张幻灯片放到了notepad ++和html中，并且在测试我的网站时图片不会改变。 请帮助我将其更改为工作状态。 另外，如果您有任何视频可能对他们也有用。 编辑软件重要吗？

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht ml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
 var image1=new image()
 image1.src="theimage.png"
 var image2=new image()
 image2.src="soccerafrica.png"
 var image3=new image()
 image3.src="thatsall.png"

</script>
<style> 
body.border{ border-style:solid; 
border-width:20px;
border-color:#3C3;
margin: 0px;
}

@font-face{font-family: habara; 
src: Harabara.ttf;}
div{font-family: habara; }


ul { list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
    }
li { display: inline-block;
width:250px;
margin: 0px; 
}

</style>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kinectricity</title>
</head>
<body class="border">
<p><pre>
</pre>
</p>

<h1 style="font-size:30px; background-color:#F90; margin:0px">

<ul> 
<center>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><img src="thatsall.png"height="145"width="145"</li>
    <li><a href="">Order</a></li>
    <li><a href="">Contact</a></li>
</center>

</ul>
</h1>
<p>
<pre>

</pre>
</p>
<center>
<h2 style="font-size: 50px; color:#7C3; margin:0px"><div>K  i  n  e  c  t  r  i  c  i  t  y</div></h2>
</center>
<p>
<pre>

</pre>
</p>
<image src="theimage.png" name="slideshow" alt="imageslideshow" height="225" width="350">
<script type="text/javascript">
var numberImage = 1
function myslide()
{
document.images.slideshow.src=eval("image"+numberImage+".src")
if(numberImage < 3)
numberImage = numberImage + 1 
else
numberImage = 1
setTimeout("myslide()" ,5000)
}
myslide()
</script>


</body>

</html>

Answer 1

可能是您忘记添加“;” 在脚本的第一块中的语句末尾？
像这样：

var image1 = new image（）;
image1.src = “theimage.png”;
var image2 = new image（）;
image2.src = “soccerafrica.png”;
var image3 = new image（）;
image3.src = “thatsall.png”;

Answer 2

Notepad ++是一个很棒的编辑器。 我们许多人将其用作我们的主要编辑器/ IDE。

此代码应为您工作：

jsFiddle演示

HTML：

<h1 style="font-size:30px; background-color:#F90; margin:0px">
  <ul> 
  <center>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><img src="http://placeimg.com/145/145/animals"height="145" width="145"</li>
      <li><a href="">Order</a></li>
      <li><a href="">Contact</a></li>
  </center>
  </ul>
</h1>
<h2 style="font-size: 50px; color:#7C3; margin:0px"><div>K  i  n  e  c  t  r  i  c  i  t  y</div></h2>
<image id="ss" src="http://placeimg.com/225/350/animals" name="slideshow" alt="imageslideshow" height="225" width="350">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

JS / jQuery的：

var numberImage = 0;
var arr = ["http://placeimg.com/50/50/animals","http://placeimg.com/48/50/animals","http://placeimg.com/50/49/animals"];
$(function(){
    myslide(numberImage);
});

function myslide(numberImage){
  $('#ss').attr('src', arr[numberImage])
  numberImage++;
  if (numberImage>2) numberImage=0;
  setTimeout(function(){myslide(numberImage)} ,3000);
}

请注意，jsFiddle具有一个rpt DIV，其中放置了下一个图像名称，仅供您查看。 在您的项目中，用您自己的图像名称替换该数组中的URL图像，因此：

var arr = ["img/image1.png","img/image2.png","img/image3.png"];

Javascript和HTML幻灯片

问题描述

2 个解决方案

解决方案1
0 2016-01-04 21:52:26

解决方案2
0 2016-01-04 22:07:04

Javascript和HTML幻灯片

问题描述

2 个解决方案

解决方案1 0 2016-01-04 21:52:26

解决方案2 0 2016-01-04 22:07:04

解决方案1
0 2016-01-04 21:52:26

解决方案2
0 2016-01-04 22:07:04