Javascript 在画布标签内放置一个photoslider_Javascript_Css_Html_Canvas

Javascript 在画布标签内放置一个photoslider

javascript css html canvas

Javascript 在画布标签内放置一个photoslider,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我试图在html5中创建一个photoslider，然后将它放在画布标签中。到目前为止，我可以看到这些图像，但我无法在它们后面设置画布。有人能告诉我发生了什么事吗？先谢谢你 HTML: JS: 函数slidemages（）{ document.images.slide.src=eval（“img[“+step+”].src”）；如果（步骤 var canvas=document.getElementById（'photoSliderViewport'）； var ctx=canvas.getC

我试图在html5中创建一个photoslider，然后将它放在画布标签中。到目前为止，我可以看到这些图像，但我无法在它们后面设置画布。有人能告诉我发生了什么事吗？先谢谢你

HTML:

JS:

函数slidemages（）{
document.images.slide.src=eval（“img[“+step+”].src”）；
如果（步骤
var canvas=document.getElementById（'photoSliderViewport'）；
var ctx=canvas.getContext（'2d'）；
var step=0；//开始数组键（0索引）
var images=[]；//映像路径数组
var nOfImages=5；//在此处设置所需的图像数
画布宽度=800；
帆布高度=800；
//用路径填充数组；
对于（var i=1；iAvoid eval和string作为第一个超时参数。什么时候是一个有效的标记？为什么你使用脚本如此iframeish？只是出于好奇…为什么你需要画布？@RokoC.Buljan我应该删除它们吗？你能更具体地说一下吗？因为我是html新手。你可以为你的图像设置边框。不需要使用can瓦斯
<html>
<head>
    <script type="text/javascript">
        var step = 1;
        var img = new Array(17);

        for(var i = 1; i <= 17; i++){
            img[i] = new Image();
            img[i].src = "/images/img"+i+".jpg";    //load images
        }
    </script>

    <script type="text/javascript" src="\js\photoSliderController.js"></script>
</head>
<body>
<section id="photoSliderContainer">
        <img name="slide" id="photoSliderControls" src="C:\Users\Vassileios\Dropbox\symmetexw\images\img1.jpg" width="500" height="300"> 
            <script type="text/javascript">
                slideImages();
            </script>
        </img>
        <canvas id="photoSliderViewport">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </section>
</body>
</html>

#photoSliderViewPort{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
width: 800px;
height: 800px;
background:rgba(75,75,186,1);
}

#photoSliderControls{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
z-index:1;
}

function slideImages(){
document.images.slide.src = eval("img["+step+"].src");
    if(step<17)
        step++;
    else
        step=1;
setTimeout("slideImages()",3000);
}