今天我们要分享一些超酷而且实用的jQuery焦点图

希望本文所述对大家学习javascript程序设计有所帮助。

 6、jQuery 3D图片滑块焦点图插件

  这是一款很酷的jQuery 3D焦点图插件,和之前分享的jQuery焦点图不同的是,这款焦点图插件的图片切换播放样式是3D的,图片就像立方体一样可以上下翻滚,同时你不仅可以点击焦点图的左右切换按钮,也可以通过图片下方的小按钮进行图片切换。

图片 1

在线演示        源码下载

这是一款宽屏且可以自动播放图片的jQuery焦点图插件,同样的,在图片切换的时候会出现上一张和下一张的部分图片,实现三张图片之间的左右滑动切换。

JavaScript代码

 1、jQuery多动画切换焦点图

  之前我们已经分享过很多超酷的jQuery焦点图插件了,而且也都相当实用。今天我们要再来介绍一款可实现多种切换动画的jQuery焦点图,这款焦点图整体非常简单,左右两侧各有一个上一张和下一张的切换按钮。每张图片在切换时也都有各不相同的动画特效。

图片 2

在线演示        源码下载

这是一款非常实用的jQuery焦点图插件,和其他的jQuery焦点图插件一样,它同样支持多张图片的任意跳转切换,同时,焦点图切换方式是水平的,而且相当流畅,因为这款jQuery焦点图实现很简单。

  http://www.colazionedamichy.it/ http://www.percivalclo.com/ http://www.wanda.net/fr http://lifeingreenville.com/ http://circlemeetups.com/ http://www.castirondesign.com/ http://www.foundrycollective.com/ http://www.mathiassterner.com/home http://learnlakenona.com/ http://www.neighborhood-studio.com/ http://www.beckindesign.com/ http://kicksend.com/   < > 

.dg-container{ width: 100%; height: 450px; position: relative;}.dg-wrapper{ width: 481px; height: 316px; margin: 0 auto; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px;}.dg-wrapper a{ width: 482px; height: 316px; display: block; position: absolute; left: 0; top: 0; background: transparent url(../images/browser.png) no-repeat top left; box-shadow: 0px 10px 20px rgba;}.dg-wrapper a.dg-transition{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.dg-wrapper a img{ display: block; padding: 41px 0px 0px 1px;}.dg-wrapper a div{ font-style: italic; text-align: center; line-height: 50px; text-shadow: 1px 1px 1px rgba; color: #333; font-size: 16px; width: 100%; bottom: -55px; display: none; position: absolute;}.dg-wrapper a.dg-center div{ display: block;}.dg-container nav{ width: 58px; position: absolute; z-index: 1000; bottom: 40px; left: 50%; margin-left: -29px;}.dg-container nav span{ text-indent: -9000px; float: left; cursor:pointer; width: 24px; height: 25px; opacity: 0.8; background: transparent url no-repeat top left;}.dg-container nav span:hover{ opacity: 1;}.dg-container nav span.dg-next{ background-position: top right; margin-left: 10px;}

 7、jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

  之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片。另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片。

图片 3

在线演示        源码下载

4、jQuery垂直滑动切换焦点图动画

这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便。如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你。

  焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效。今天我们要分享一些超酷而且实用的jQuery焦点图插件,并分享它们的源代码。

以上就是10个超赞的jQuery图片滑块动画,希望对你有所帮助。

/** * jquery.gallery.js * Copyright 2011, Pedro Botelho / Codrops * Free to use under the MIT license. * * Date: Mon Jan 30 2012 */(function { /* * Gallery object. */ $.Gallery = function { this.$el = $; this._init; }; $.Gallery.defaults = { current : 0, // index of current item autoplay : false,// slideshow on / off interval : 2000 // time between transitions }; $.Gallery.prototype = { _init : function { this.options = $.extend( true, {}, $.Gallery.defaults, options ); // support for 3d / 2d transforms and transitions this.support3d = Modernizr.csstransforms3d; this.support2d = Modernizr.csstransforms; this.supportTrans = Modernizr.csstransitions; this.$wrapper = this.$el.find; this.$items = this.$wrapper.children(); this.itemsCount = this.$items.length; this.$nav = this.$el.find; this.$navPrev = this.$nav.find; this.$navNext = this.$nav.find; // minimum of 3 items if( this.itemsCount < 3 ) { this.$nav.remove(); return false; } this.current = this.options.current; this.isAnim = false; this.$items.css({ 'opacity' : 0, 'visibility': 'hidden' }); this._validate; // load the events this._loadEvents(); // slideshow if( this.options.autoplay ) { this._startSlideshow(); } }, _validate : function() { if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) { this.current = 0; } }, _layout : function() { // current, left and right items this._setItems(); // current item is not changed // left and right one are rotated and translated var leftCSS, rightCSS, currentCSS; if( this.support3d && this.supportTrans ) { leftCSS = { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY' }; rightCSS = { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY' }; leftCSS.opacity = 1; leftCSS.visibility = 'visible'; rightCSS.opacity = 1; rightCSS.visibility = 'visible'; } else if( this.support2d && this.supportTrans ) { leftCSS = { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate' }; rightCSS = { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate' }; currentCSS = { 'z-index' : 999 }; leftCSS.opacity = 1; leftCSS.visibility = 'visible'; rightCSS.opacity = 1; rightCSS.visibility = 'visible'; } this.$leftItm.css; this.$rightItm.css; this.$currentItm.css.css({ 'opacity' : 1, 'visibility': 'visible' }).addClass; }, _setItems : function() { this.$items.removeClass; this.$currentItm = this.$items.eq; this.$leftItm =  ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq; this.$rightItm = ( this.current === this.itemsCount - 1 ) ? this.$items.eq : this.$items.eq; if( !this.support3d && this.support2d && this.supportTrans ) { this.$items.css; this.$currentItm.css; } // next & previous items if( this.itemsCount > 3 ) { // next item this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq : this.$rightItm.next(); this.$nextItm.css( this._getCoordinates; // previous item this.$prevItm = ( this.$leftItm.index ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev(); this.$prevItm.css( this._getCoordinates; } }, _loadEvents : function() { var _self = this; this.$navPrev.on( 'click.gallery', function { if( _self.options.autoplay ) { clearTimeout; _self.options.autoplay = false; } _self._navigate; return false; }); this.$navNext.on( 'click.gallery', function { if( _self.options.autoplay ) { clearTimeout; _self.options.autoplay = false; } _self._navigate; return false; }); this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function { _self.$currentItm.addClass; _self.$items.removeClass; _self.isAnim = false; }); }, _getCoordinates : function { if( this.support3d && this.supportTrans ) { switch { case 'outleft': return { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY', 'opacity' : 0, 'visibility' : 'hidden' }; break; case 'outright': return { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY', 'opacity' : 0, 'visibility' : 'hidden' }; break; case 'left': return { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY', 'opacity' : 1, 'visibility' : 'visible' }; break; case 'right': return { '-webkit-transform' : 'translateX translateZ rotateY', '-moz-transform' : 'translateX translateZ rotateY', '-o-transform' : 'translateX translateZ rotateY', '-ms-transform' : 'translateX translateZ rotateY', 'transform' : 'translateX translateZ rotateY', 'opacity' : 1, 'visibility' : 'visible' }; break; case 'center': return { '-webkit-transform' : 'translateX rotateY', '-moz-transform' : 'translateX rotateY', '-o-transform' : 'translateX rotateY', '-ms-transform' : 'translateX rotateY', 'transform' : 'translateX rotateY', 'opacity' : 1, 'visibility' : 'visible' }; break; }; } else if( this.support2d && this.supportTrans ) { switch { case 'outleft': return { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate', 'opacity' : 0, 'visibility' : 'hidden' }; break; case 'outright': return { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate', 'opacity' : 0, 'visibility' : 'hidden' }; break; case 'left': return { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate', 'opacity' : 1, 'visibility' : 'visible' }; break; case 'right': return { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate', 'opacity' : 1, 'visibility' : 'visible' }; break; case 'center': return { '-webkit-transform' : 'translate', '-moz-transform' : 'translate', '-o-transform' : 'translate', '-ms-transform' : 'translate', 'transform' : 'translate', 'opacity' : 1, 'visibility' : 'visible' }; break; }; } else { switch { case 'outleft' : case 'outright' : case 'left' : case 'right' : return { 'opacity' : 0, 'visibility' : 'hidden' }; break; case 'center' : return { 'opacity' : 1, 'visibility' : 'visible' }; break; }; } }, _navigate : function { if( this.supportTrans && this.isAnim ) return false; this.isAnim = true; switch { case 'next' : this.current = this.$rightItm.index(); // current item moves left this.$currentItm.addClass.css( this._getCoordinates; // right item moves to the center this.$rightItm.addClass.css( this._getCoordinates; // next item moves to the right if { // left item moves out this.$leftItm.addClass.css( this._getCoordinates; this.$nextItm.addClass.css( this._getCoordinates; } else { // left item moves right this.$leftItm.addClass.css( this._getCoordinates; } break; case 'prev' : this.current = this.$leftItm.index(); // current item moves right this.$currentItm.addClass.css( this._getCoordinates; // left item moves to the center this.$leftItm.addClass.css( this._getCoordinates; // prev item moves to the left if { // right item moves out this.$rightItm.addClass.css( this._getCoordinates; this.$prevItm.addClass.css( this._getCoordinates; } else { // right item moves left this.$rightItm.addClass.css( this._getCoordinates; } break; }; this._setItems(); if this.$currentItm.addClass; }, _startSlideshow : function() { var _self = this; this.slideshow = setTimeout { _self._navigate; if( _self.options.autoplay ) { _self._startSlideshow(); } }, this.options.interval ); }, destroy : function() { this.$navPrev.off; this.$navNext.off; this.$wrapper.off; } }; var logError = function { if  { console.error; } }; $.fn.gallery = function { if ( typeof options === 'string' ) { var args = Array.prototype.slice.call; this.each { var instance = $.data; if  { logError( "cannot call methods on gallery prior to initialization; " + "attempted to call method '" + options + "'" ); return; } if ( !$.isFunction || options.charAt { logError( "no such method '" + options + "' for gallery instance" ); return; } instance[ options ].apply; } else { this.each { var instance = $.data; if  { $.data( this, 'gallery', new $.Gallery; } }); } return this; };});

 2、jQuery带缩略图焦点图插件 自定义滑块内容

  今天我们要来分享一款基于jQuery的焦点图插件,这款jQuery焦点图功能十分强大,有以下两个特点:第一是焦点图带有缩略图预览,当鼠标滑过对应图片的按钮时,即可弹出缩略图;第二是焦点图的滑块内容可以自定义,可以是图片,也可以是任何HTML元素,因此也非常的灵活。另外,焦点图的切换动画也有多种,非常炫酷。

图片 4

在线演示        源码下载

这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩。另外,这款jQuery焦点图插件的特点是全屏的效果,因此看上去也非常的大气和整体。

 3、jQuery仿苹果样式焦点图插件

  这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气。焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用。

图片 5

在线演示        源码下载

另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。

 4、简易jQuery焦点图插件 填充式切换按钮

  这又是一款简易型的jQuery焦点图插件,这款焦点图插件可以进行自动播放,也可以点击下方的填充式切换按钮进行手动切换,非常方便。另外,其简易的外观让其加载速度十分快,非常适合高性能的网页上面。该jQuery焦点图的图片切换动画是淡入淡出的效果,切换也十分流畅。

图片 6

在线演示        源码下载

如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频

 8、jQuery宽屏游戏焦点图 Tab图片切换按钮

  今天我们要来分享一款全新的jQuery焦点图插件,这款jQuery焦点图是宽屏的,因此外观看上去非常大气,在这里我们也分享过很多宽屏的jQuery焦点图插件,但是这款jQuery焦点图在切换图片上不仅具有淡入淡出的动画特效,而且切换的按钮式tab形式的,图片切换也十分流畅。

图片 7

在线演示        源码下载

  以上就是很不错的jQuery焦点图插件,欢迎收藏分享。

在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件。本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件将为你节省很多开发时间,而且效果都还不错,一起来欣赏一下吧。

本文由必威发布于必威-运维,转载请注明出处:今天我们要分享一些超酷而且实用的jQuery焦点图

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。