I'm making a slideshow and the images won't be static, they'll be pulled in dynamically through an array and finally it will look like this:
What i'm wondering is, what is more CPU friendly, CSS3 & jQuery making transitions fade simply by changing the CSS class of the div that will fill the screen, or, Canvas with drawn on it refreshing each time?
You don't have to use HTML5, but there is nothing stopping you... in fact, here is a slideshow about HTML5 (Using HTML5)!
Webkit (Safari, Chrome, etc.) has built-in support for CSS-based transitions effects, and Mozilla is working on adding them as well. Being able to use the browser-supplied transitions, where available, will definitely provide a performance boost.
I'm not sure what your browser compatibility requirements are, but keep in mind that no version of IE supports <canvas> yet. You can use a JavaScript library to provide it with pseudo-support, but I would imagine that's going to lead to a performance hit.
Given the sad state affairs we are in at the moment where IE doesn't support CANVAS then I'd say stick with the jQuery version. Unless, of course, you don't mind excluding IE - but bare in mind it's still by far the most popular browser out there.
I'd also say that sliders aren't that CPU intensive and I would always put maintainability and compatibility first.
Plenty of options came into my mind:
Transitions by JS/CSS are well-tested & quick to implement. CPU usage is unlikely to be a problem.
However, if you want to experience with the canvas option and support the Redmond-based browsing-thingy, you can simplify your life by drawing through Raphaël cross-browser API.
Pure CSS transitions are the most elegant (arguably) method. Unfortunately folks outside Cupertino have been lazy to implement them, so their use is currently mostly limited to impressive extra eye candy.
Retro way: pretend it's 2001 and these guys enables you to do some serious CPU burning for few hundred bucks.