强力推荐，HTML5与JQuery融合的幻灯片

发布时间：2023-11-06 14:39:04 所属栏目：教程来源：未知

导读： 　　$(window).load(function(){

　　 //我们监听了 window.load 事件，因此我们确定幻灯片上的所有图片都能够正确进行加载。

　　 //测试当前浏览器是否支持canvas

　　$(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);

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!