标签归档:焦点图

jQuery大屏图文切换时间轴 可循环播放

今天要给大家带来一款比较特别的jQuery图片切换播放器,它的特点在于切换的不仅仅是图片,而是图文,另外每一幅图文关联时间轴上的一个节点,时间轴跟随图文切换而移动。同时,这款图文时间轴播放器还可以无缝循环播放。如果你的网站上需要介绍历史信息,那么这款jQuery插件就非常适合你。

jquery-text-image-timeline

在线演示源码下载

CSS3 3D立方体焦点图动画

之前我们分享过很多基于jQuery和CSS3的焦点图动画插件,大部分都是在平面上通过过渡动画切换不同的图片,例如这里就有10款非常不错的jQuery/CSS3焦点图插件。今天我们要在这里继续分享一款基于CSS3的焦点图插件,它的特点是图片切换容器是一个3D的立方体,点击图片后即可将该图片呈现在立方体的前面。

css3-3d-cube-image-player

在线演示源码下载

基于Swiper.js的移动端图片滑块插件 支持自动播放和拖拽

Swiper是目前较为流行的移动端内容滑块插件,底层是基于JavaScript的。今天要分享的这款Swiper.js移动端图片滑块插件功能十分强大,和其他jQuery焦点图插件类似,Swiper也提供图片滑动切换功能,并且支持左右箭头切换和悬浮图片上方的圆形链接点进行快速切换。另外,Swiper还支持自动播放或鼠标拖拽滑动。

swiperjs-image-player

在线演示源码下载

HTML5/CSS3 全屏3D焦点图切换插件

今天我们要给大家分享一款基于HTML5和CSS3的3D焦点图插件,类似的3D焦点图插件之前也有分享过,比如这款jQuery 3D 垂直螺旋切换焦点图动画和这款jQuery/CSS3 3D旋转图片切换焦点图插件都非常不错。这次的3D焦点图动画插件是全屏的,效果非常绚丽,整张图片就像悬浮在夜空中一样,切换时还带有丰富的过渡动画效果。

html5-css3-3d-full-slider

在线演示源码下载

纯CSS3实现3D立方体焦点图切换动画

这是一款利用纯CSS3实现的3D立方体焦点图切换动画,是不是觉得很富有创意?图片一开始展示是平面的,但是定时会以3D立体的方式切换立方体面,从而达到切换图片的效果。和之前分享的HTML5 3D立方体旋转动画不同的是,它在图片切换时的动画并不是简单的旋转,而是那种富有节奏感的复杂运动。

pure-css3-3d-cube-slider

在线演示源码下载

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

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

jquery-full-slider

在线演示源码下载

jQuery水平滑动焦点图插件

这又是一款基于jQuery的焦点图插件,前面我们也分享过很多优秀的jQuery焦点图应用插件,有兴趣的朋友可以前往看看。今天介绍的这款jQuery焦点图插件的图片是水平滑动的,三张图片同时滑动有一种视差效果的感觉,并且焦点图也拥有左右切换箭头按钮,总体来讲非常华丽。

jquery-hor-image-slider

在线演示源码下载

接下来我们来看看实现这款jQuery水平滑动焦点图的方法和源码,代码主要由HTML、CSS以及jQuery组成,总体来说实现思路比较简单。

HTML代码:

<h1 id=”frame-title”>Featured Projects</h1>
<div class=”frame-smaller-outer left”>
<div class=”frame-smaller-inner”>
<div class=”slider”>
<img src=’images/selfservice11.jpg’ /><img src=’images/portfolio1.jpg’ /><img src=’i[......]

阅读全文>>

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

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

jquery-image-slider-full-switch

在线演示源码下载

jQuery带箭头按钮左右循环焦点图

这次要分享的jQuery插件也是一款焦点图插件,这在我们之前分享的焦点图插件中算是功能比较完善的了,图片的滑动效果也非常不错。图片两侧带有左右箭头,点击它们即可左右切换图片。另外,图片上面可以浮动文字描述,是一款功能强大的jQuery焦点图插件。

jquery-arrow-image-player

在线演示源码下载

jQuery幻灯片播放焦点图插件

这又是一款基于jQuery的幻灯片焦点图插件,和之前分享的焦点图插件类似,图片都可以左右滑动。这款jQuery焦点图的优势在于不仅有一排小按钮切换图片滑动,而且可以直接点击图片来进行滑动切换。而且图片滑动相当流畅。

jquery-image-slider-player

在线演示源码下载