將一個photoslider放入畫布標籤

我試圖在html5中創建一個photoslider，然後將它放在畫布標籤中。到目前爲止，我可以看到這些圖像，但我無法設置它們背後的畫布。有人可以告訴我發生了什麼事嗎？先謝謝你。將一個photoslider放入畫布標籤

HTML：

<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>

CSS：

#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; 
}

JS：

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

來源

2014-09-20 Vassilis De

避免eval和字符串作爲第一個超時參數。 – 2014-09-20 18:33:53

因爲何時''有效的標籤？爲什麼你使用腳本如此iframeish？ – 2014-09-20 18:38:27

出於好奇...爲什麼你需要一個畫布？ – 2014-09-20 18:44:53

var canvas = document.getElementById('photoSliderViewport'); 
 
var ctx = canvas.getContext('2d'); 
 
var step = 0; // Start Array key (0 indexed) 
 
var images = []; // Array of image paths 
 
var nOfImages = 5; // Set here the desired number of images 
 

 
canvas.width = 800; 
 
canvas.height = 800; 
 

 
// Populate array with paths; 
 
for(var i=1; i<=nOfImages; i++){ 
 
    images.push("http://placehold.it/800x800/ccc&text="+i+".jpg"); 
 
} 
 

 
console.log(images); 
 

 
function slideImages(){ 
 
    var img = new Image(); 
 
    img.onload = function(){   // Once it's loaded... 
 
    ctx.drawImage(img, 0, 0);  // Draw it to canvas 
 
    step = ++step % nOfImages ; // Increase and loop step 
 
    setTimeout(slideImages, 3000); // Do it again in 3000ms 
 
    }; 
 
    img.src = images[step];   // Finally, set the new image src 
 
} 
 

 
slideImages(); // START

<section id="photoSliderContainer"> 
 
     <canvas id="photoSliderViewport"> 
 
     Your browser does not support the HTML5 canvas tag. 
 
     </canvas> 
 
    </section>

來源

2014-09-20 19:24:14

非常感謝我的朋友！你幫了我很多！ – 2014-09-20 19:28:40

@Vassilis不用客氣！快樂的編碼！ – 2014-09-20 19:28:59

將一個photoslider放入畫布標籤

回答

相關問題