`
renyiqiu
  • 浏览: 30858 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

绝对推荐,HTML5与JQuery结合的幻灯片

阅读更多

创建一个HTML5与JQuery结合的幻灯片

 

文章详情(附demo和下载)

 

 

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

 

 

 

 

 

0
0
分享到:
评论

相关推荐

    jQuery途牛首页定时幻灯片轮播效果

    综上所述,"jQuery途牛首页定时幻灯片轮播效果"是结合了jQuery的高效性和动画功能,以及良好的用户体验设计的一个实例,它展示了如何使用JavaScript库来实现复杂但直观的网页动态效果。在实际开发中,通过分析和理解...

    jquery弹性幻灯片.zip

    同时,HTML5的数据属性(data-*)可以用来存储与幻灯片相关的自定义信息,方便jQuery进行读取和处理。 构建一个基本的jQuery弹性幻灯片框架,我们需要以下步骤: 1. **HTML结构**:创建包含多个幻灯片的容器,每个...

    jQuery+CSS 幻灯片左右自动滚动带数字与左右点击焦点幻灯片

    总的来说,"jQuery+CSS 幻灯片左右自动滚动带数字与左右点击焦点幻灯片"是一个结合了前端技术的互动展示工具,通过合理运用jQuery和CSS,能够为用户提供流畅、直观的浏览体验。在实际开发中,我们还需要考虑到兼容性...

    带登陆框的jquery满屏幻灯片

    【jQuery 满屏幻灯片与登录框实现详解】 在网页设计中,全屏幻灯片和登录框是常见的元素,它们可以提升网站的视觉效果和用户体验。本教程将详细解析如何使用jQuery来实现一个带有登录框的全屏幻灯片效果。 一、...

    jquery幻灯片图片折页上下滑动切换类似拉窗帘效果的幻灯片

    综上所述,通过HTML、CSS和jQuery的结合,我们可以创建一个具有独特“拉窗帘”效果的幻灯片插件。这个插件不仅展示了jQuery在动画和交互方面的强大能力,也提供了良好的用户体验。开发者可以根据需求进一步定制样式...

    jQuery滤镜百叶窗幻灯片,超炫效果图片轮换插件。

    综上所述,jQuery滤镜百叶窗幻灯片是一种结合了jQuery库、CSS样式和JavaScript动画技术的网页交互元素,其核心在于图片的分片处理和动态效果的平滑过渡。开发者可以通过学习和研究这个插件,掌握网页动态效果的制作...

    jQuery三张图片一起滑动幻灯片特效.zip

    总结来说,jQuery三张图片一起滑动的幻灯片特效结合了jQuery的事件处理、DOM操作和动画功能,通过精心设计的CSS和JavaScript代码,实现了用户友好的图片切换效果。理解并掌握这种特效的实现原理,对于提升网页动态...

    jquery叠加切换幻灯片.zip

    本文将深入探讨如何使用jQuery库来实现叠加切换的幻灯片效果,同时结合CSS和HTML5的相关知识,构建一个功能完善、视觉美观的幻灯片组件。 首先,我们需要了解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,...

    jQuery环形旋转幻灯片 jQuery环形旋转幻灯片网页特效.zip

    总的来说,jQuery环形旋转幻灯片结合了HTML、CSS和JavaScript的力量,创造出引人注目的网页交互体验。开发者需要熟练掌握jQuery的选择器、事件处理和动画API,以及CSS布局和动画技巧,才能打造出流畅且具有吸引力的...

    jquery图片折叠幻灯片.zip

    本篇文章将深入探讨如何利用jQuery创建一个图片折叠幻灯片,同时结合CSS和HTML5,打造一款功能完备、视觉效果出色的网页组件。 首先,我们需要理解HTML5的基础结构。HTML5引入了新的标签,如`&lt;section&gt;`、`...

    绝对经典的---ajax幻灯片

    8. **前端框架与库**:虽然描述中没有提及,但实现这样的幻灯片可能使用了像jQuery这样的库,简化了DOM操作和AJAX请求。 9. **响应式设计**:考虑到现代网页需要适应不同设备,幻灯片应具备响应式设计,以适应手机...

    jQuery可快进拖动切换幻灯片sampSlider.zip

    总的来说,jQuery可快进拖动切换幻灯片sampSlider是一个综合运用了前端技术的幻灯片插件,它利用jQuery的便利性、CSS的灵活性和HTML5的语义性,实现了用户友好、交互性强的滑动效果。无论是网站的首页展示,还是产品...

    简单的使用jquery的轮播、图片幻灯片代码

    这个简单的jQuery轮播图和图片幻灯片实现利用了jQuery的选择器、动画效果和事件处理,结合HTML和CSS,创建了一个基本的交互式图片展示功能。你可以根据需求调整CSS样式、切换速度、添加更多功能,如指示器、自动暂停...

    jQuery+CSS3实现不错的气泡幻灯片效果

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个引人注目的气泡幻灯片效果。这种效果能够为网页增添动态性和互动性,提高用户体验,是现代网页设计中常见的一种元素。 首先,jQuery是一种广泛使用的...

    jQuery淡入淡出全屏幻灯片自动轮播图代码.zip

    本文将深入解析“jQuery淡入淡出全屏幻灯片自动轮播图代码”的实现原理与应用,帮助开发者理解和运用这一实用的jQuery特效。 一、jQuery库的引入 首先,我们需要在HTML文件(如index.html)中引入jQuery库。这通常...

    jquery竖向全屏切换幻灯片效果

    总的来说,"jQuery竖向全屏切换幻灯片效果"是一种创新的网页设计手法,结合了jQuery的便利性和CSS3的视觉特效,为网页带来了独特的交互体验。在实际应用中,开发者需要根据项目需求,合理调整代码,兼顾功能和性能,...

    jQuery电影网站大图幻灯片轮播特效源码.zip

    总的来说,jQuery电影网站大图幻灯片轮播特效源码是一个结合了前端技术与设计的实例,可以帮助开发者提升网站的视觉吸引力和用户体验。通过学习和实践这样的项目,你可以深入理解jQuery如何在实际场景中工作,并提升...

    圆形幻灯片.zip

    总的来说,“圆形幻灯片”结合了jQuery库的便利性、CSS3的动态效果以及JavaScript的交互逻辑,提供了一种创新的图片展示方式。开发者可以通过学习和研究这个项目,提升自己的前端开发技能,同时也能在实际项目中应用...

    html5全屏图片手风琴幻灯片展示代码.zip

    HTML5全屏图片手风琴幻灯片展示代码是一种常见的前端设计技术,它结合了HTML5、CSS3和JavaScript的特性,为用户呈现一个交互性强、视觉效果出色的图片轮播展示。这种幻灯片通常应用于网站的首页或者产品展示区域,以...

    jQuery和CSS3炫酷3d翻转图片幻灯片插件

    这个jQuery和CSS3 3D翻转图片幻灯片插件结合了两者的优势,实现了富有创新性和吸引力的交互体验。对于开发者来说,理解并掌握jQuery的事件处理和CSS3的3D变换是实现类似效果的关键。同时,合理组织项目资源,编写...

Global site tag (gtag.js) - Google Analytics