- $(window).load(function(){
- //我们监听了 window.load 事件,因此我们确定幻灯片上的所有图片都能够正确进行加载。
- //测试当前浏览器是否支持canvas元素
- var supportCanvas = 'getContext' in document.createElement('canvas');
- //图片的canvas效果操作是受CPU渲染影响的,
- //这就是为什么我们要使用setTimeout异步地来操作它们
- //这样就能提升页面的响应
- var slides = $('#slideshow li'),
- current = 0,
- slideshow = {width:0,height:0};
- setTimeout(function(){
- if(supportCanvas){
- $('#slideshow img').each(function(){
- if(!slideshow.width){
- //保存首张图片的尺寸
- slideshow.width = this.width;
- slideshow.height = this.height;
- }
- //渲染修改后图像的版本
- createCanvasOverlay(this);
- });
- }
- $('#slideshow .arrow').click(function(){
- var li = slides.eq(current),
- canvas = li.find('canvas'),
- nextIndex = 0;
- //取决于这个是下一张箭头的按钮还是上一张箭头的按钮,
- //计算出下一张幻灯片的索引号。
- 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){
- //若当前浏览器支持canvas
- canvas.fadeIn(function(){
- //显示下一张的幻灯片
- next.show();
- current = nextIndex;
- //隐藏当前的幻灯片
- li.fadeOut(function(){
- li.removeClass('slideActive');
- canvas.hide();
- next.addClass('slideActive');
- });
- });
- }
- else {
- //若当前浏览器不支持canvas元素。
- //使用幻灯片普通版本
- current=nextIndex;
- next.addClass('slideActive').show();
- li.removeClass('slideActive').hide();
- }
- });
- },100);
- //该片段来自于http://www.codesnippet.cn/detail/100420149283.html
来源: http://www.codesnippet.cn/detail/100420149283.html