JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery图片下滑切换焦点图插件

jQuery图片下滑切换焦点图插件

       这次我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件。焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错。

在线演示     源码下载


       下面是实现这款jQuery焦点图的过程和代码。

       HTML代码:

  1. <div class="slider-wrap col-width">
  2.     <div class="cycleslider-wrap" style="display: block;">
  3.        <div id="slider" class="cycleslider" style="position: relative; width: 970px; height: 350px;">
  4.              <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
  5.              <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
  6.               <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
  7.              <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
  8.         </div>
  9.         <a id="cycle-prev" href="#" style="opacity: 0; left: -50px;">Prev</a>
  10.         <a id="cycle-next" href="#" style="opacity: 0; right: -50px;">Next</a>
  11.         <div id="cycle-nav">
  12.         </div>
  13.     </div>
  14.     <div class="loader" style="display: none;"></div>
  15. </div>
复制代码
       HTML代码比较简单,其中有一个图片加载动画,初始化时在页面中隐藏,等待加载焦点图图片时将会出现Loading动画。

       jQuery代码:

       首先是引用了jQuery脚本库和slider的相应脚本库

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.slider.pack.js"></script>
  3. <script type="text/javascript" src="js/jquery.easing.js"></script>
复制代码
       然后就是渲染的初始化jQuery代码:

  1. jQuery(function() {
  2.         jQuery('#cycle-prev, #cycle-next').css({opacity: '0'});
  3.         jQuery('.cycleslider-wrap').hover(function(){
  4.                 jQuery('#cycle-prev',this).stop().animate({left: '-31', opacity: '1'},200,'easeOutCubic');
  5.                 jQuery('#cycle-next',this).stop().animate({right: '-31', opacity: '1'},200,'easeOutCubic');         
  6.         }, function() {
  7.                 jQuery('#cycle-prev',this).stop().animate({left: '-50', opacity: '0'},400,'easeInCubic');
  8.                 jQuery('#cycle-next',this).stop().animate({right: '-50', opacity: '0'},400,'easeInCubic');               
  9.         });

  10.         jQuery(".cycleslider-wrap").fadeIn(1000);
  11.         jQuery(".slider-wrap .loader").css({display: "none"});
  12.         jQuery("#slider").cycle({
  13.                 fx:  "scrollDown",
  14.                 speed:  "800",
  15.                 timeout: "1000",
  16.                 easing:  "easeOutBounce",
  17.                 next:  "#cycle-next",
  18.                 prev:  "#cycle-prev",
  19.                 pager:  "#cycle-nav"
  20.         });

  21. });
复制代码

【jQuery图片下滑切换焦点图插件】相关文章

1. jQuery图片下滑切换焦点图插件

2. jQuery图片分组切换焦点图插件

3. 一款基于jQuery的图片分组切换焦点图插件

4. jQuery仿Flash横向切换焦点图插件

5. jQuery带文字标题图片切换焦点图

6. jQuery图片左右滑动焦点图插件

7. jQuery鼠标滑动切换焦点图

8. jQuery上下切换焦点图 带缩略图悬浮

9. 宽屏可左右切换的jQuery焦点图插件

10. jQuery自动轮播图片焦点图插件

本文来源:https://www.51html5.com/a1411.html

点击展开全部

﹝jQuery图片下滑切换焦点图插件﹞相关内容

「jQuery图片下滑切换焦点图插件」相关专题

其它栏目

也许您还喜欢