标签归档:jQuery焦点图

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=’images/mo[......]

阅读全文>>

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

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

jquery-image-slider-full-switch

在线演示源码下载

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

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

jquery-arrow-image-player

在线演示源码下载

jQuery幻灯片播放焦点图插件

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

jquery-image-slider-player

在线演示源码下载

简单实用的jQuery横向图片滚动焦点图插件

之前我们分享了不少焦点图插件,包括jQuery焦点图HTML5焦点图,效果都非常不错。今天的这款jQuery焦点图插件看起来非常简单,但是无论从外观和实用价值上看都相当不错。这款jQuery焦点图的图片是横向滚动的,两侧均有左右滑动按钮。

simple-jquery-image-player

下面我们来分析一下实现这款jQuery焦点图的方法以及源代码,代码主要由HTML、CSS和jQuery组成,实现思路非常简单。

HTML代码:

<UL>
  <LI>
  <DIV><A href="#"><IMG alt=Paracletos  src="images/01.jpg" width=240 height=150> </A></DIV>
  <!-- /box --></LI>
  <LI>
  <DIV><A href="#"><IMG alt="Natural Touch Soap" src="images/02.jpg" width=240 height[......]

阅读全文>>

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

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

jquery-custom-slider-thumbnail

在线演示源码下载

jQuery仿苹果样式焦点图插件

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

jquery-apple-image-slide

接下来我们一起分享一下实现这款苹果焦点图的过程及源码。

HTML代码:

<div id="gallery">

    <div id="slides" style="width: 3680px; margin-left: 0px;">

    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div>
    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/iphon[......]

阅读全文>>

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

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

jquery-3d-adaptor

在线演示源码下载

jQuery多图并列焦点图插件

今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片。另外,每张图片也都有文字描述。

jquery-mult-image-player

在线演示源码下载

jQuery动画焦点图 可自动播放图片

这是一款简单而实用的jQuery焦点图插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图片之上。由于其简单的配置,这款jQuery焦点图可以很方便地与你的网站相结合。

jquery-auto-play-image

在线演示源码下载