Javascript和html幻灯片

我把这个幻灯片放在一起记事本+ +和HTML和图片不会改变，当我测试我的网站。请帮我改变它的工作。此外，如果您有任何视频可以帮助这些人也能工作。编辑软件是否重要？Javascript和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>

来源

2016-01-04 Joaquin

编辑软件并不重要，但你应该利用现有的浏览器开发者工具（又名督察，按Ctrl + Shift调试代码+ I）单步执行您的Javascript并检查DOM。 –

难道是你忘了添加“;”在第一个脚本块中的语句结尾？
喜欢这个：

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

来源

2016-01-04 21:52:26

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"];

来源

2016-01-04 22:07:04 gibberish

Javascript和html幻灯片

回答

相关问题