Question

我把这个幻灯片放在记事本++和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

可能是你忘记添加＆＃34;;＆＃34;在第一个脚本块的语句结束？
像这样：

var image1 = new image（）;
   image1.src =＆＃34; theimage.png＆＃34 ;;
   var image2 = new image（）;
   image2.src =＆＃34; soccerafrica.png＆＃34 ;;
   var image3 = new image（）;
   image3.src =＆＃34; thatsall.png＆＃34 ;;

Answer 2

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

此代码适用于您：

jsFiddle Demo

<强> 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 个答案: