0
好吧，我想要做的是使用下面的這個例子創建一個幻燈片放映。問題是動畫不起作用。設計明智，它看起來不錯，但圖像不會在我的瀏覽器中旋轉。是因爲我必須使用window.setTimeout（）謝謝！爲什麼不能這個幻燈片演示
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
也有人似乎有類似的問題，但不太相同的代碼礦：
Why won't this slideshow code work?
繼承人的HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="slideshow">
<ul class="slides">
<li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li>
<li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li>
<li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
<li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
那麼在這裏，我們有CSS：
#slideshow{
background-color:#F5F5F5;
border:1px solid #FFFFFF;
height:340px;
margin:150px auto 0;
position:relative;
width:640px;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;
box-shadow:0 0 22px #111;
}
#slideshow ul{
height:320px;
left:10px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:10px;
width:620px;
}
#slideshow li{
position:absolute;
display:none;
z-index:10;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
#slideshow .slideActive{
z-index:1000;
}
#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}
#slideshow .arrow{
height:86px;
width:60px;
position:absolute;
background:url('img/arrows.png') no-repeat;
top:50%;
margin-top:-43px;
cursor:pointer;
z-index:5000;
}
#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}
#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}
而且現在的javascript：
$(window).load(function(){
// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.
// Testing wether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.
var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){
// Saving the dimensions of the first image:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Rendering the modified versions of the images:
createCanvasOverlay(this);
});
}
$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one:
next.show();
current = nextIndex;
// Fade the current slide out of view:
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
// This browser does not support canvas.
// Use the plain version of the slideshow.
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);
// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
// Make it the same size as the image
canvas.width = slideshow.width;
canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas:
canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array:
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
for(var i = 0,z=data.length;i<z;i++){
// The values for red, green and blue are consecutive elements
// in the imageData array. We modify the three of them at once:
data[i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) :
(255 - 2 * (255 - data[i]) * (255 - data[i])/255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) :
(255 - 2 * (255 - data[i]) * (255 - data[i])/255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) :
(255 - 2 * (255 - data[i]) * (255 - data[i])/255));
// After the RGB channels comes the alpha value, which we leave the same.
++i;
}
// Putting the modified imageData back on the canvas.
canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);
// Inserting the canvas in the DOM, before the image:
image.parentNode.insertBefore(canvas,image);
}
});
可以用'html'，'css'創建jsfiddle嗎？是否需要包括利用現有的'js'？ – guest271314
不知道如何在CSS中創建幻燈片。我的理解是，這是一個腳本根據如何做到這一點[教程]（http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/）。 此外，它已被引起我的注意，現在googleapis已關閉，因此可能無法正常工作。 –
應該仍然能夠通過下載'jquery' http://code.jquery.com來嘗試/運行，（如果可以的話），然後將jquery放在同一個文件夾中，將特定'script' src'調整爲' jquery'下載，ieg，'src =「jquery-1.10.2.min.js」' – guest271314