jQuery图片下滑切换焦点图插件
这次我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件。焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错。
HTML代码:
HTML代码比较简单,其中有一个图片加载动画,初始化时在页面中隐藏,等待加载焦点图图片时将会出现Loading动画。
jQuery代码:
首先是引用了jQuery脚本库和slider的相应脚本库
然后就是渲染的初始化jQuery代码:
在线演示 源码下载
HTML代码:
- <div class="slider-wrap col-width">
- <div class="cycleslider-wrap" style="display: block;">
- <div id="slider" class="cycleslider" style="position: relative; width: 970px; height: 350px;">
- <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
- <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
- <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的代码完成对多的事情"></a></div>
- <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="为客户创造价值就是我们存在的价值"></a></div>
- </div>
- <a id="cycle-prev" href="#" style="opacity: 0; left: -50px;">Prev</a>
- <a id="cycle-next" href="#" style="opacity: 0; right: -50px;">Next</a>
- <div id="cycle-nav">
- </div>
- </div>
- <div class="loader" style="display: none;"></div>
- </div>
HTML代码比较简单,其中有一个图片加载动画,初始化时在页面中隐藏,等待加载焦点图图片时将会出现Loading动画。
jQuery代码:
首先是引用了jQuery脚本库和slider的相应脚本库
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.slider.pack.js"></script>
- <script type="text/javascript" src="js/jquery.easing.js"></script>
然后就是渲染的初始化jQuery代码:
- jQuery(function() {
- jQuery('#cycle-prev, #cycle-next').css({opacity: '0'});
- jQuery('.cycleslider-wrap').hover(function(){
- jQuery('#cycle-prev',this).stop().animate({left: '-31', opacity: '1'},200,'easeOutCubic');
- jQuery('#cycle-next',this).stop().animate({right: '-31', opacity: '1'},200,'easeOutCubic');
- }, function() {
- jQuery('#cycle-prev',this).stop().animate({left: '-50', opacity: '0'},400,'easeInCubic');
- jQuery('#cycle-next',this).stop().animate({right: '-50', opacity: '0'},400,'easeInCubic');
- });
- jQuery(".cycleslider-wrap").fadeIn(1000);
- jQuery(".slider-wrap .loader").css({display: "none"});
- jQuery("#slider").cycle({
- fx: "scrollDown",
- speed: "800",
- timeout: "1000",
- easing: "easeOutBounce",
- next: "#cycle-next",
- prev: "#cycle-prev",
- pager: "#cycle-nav"
- });
- });
【jQuery图片下滑切换焦点图插件】相关文章
本文来源:https://www.51html5.com/a1411.html
﹝jQuery图片下滑切换焦点图插件﹞相关内容
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
- jQuery带暂停按钮的焦点图插件
- jQuery右侧Tab选项卡的焦点图插件
- jQuery带缩略图的宽屏焦点图插件
- jQuery热点新闻Tab焦点图插件
- jQuery可自动播放动画的焦点图插件
- jQuery宽屏时间轴焦点图插件
- jQuery/HTML5超炫全屏焦点图插件
- jQuery底部带缩略图的焦点图插件
- jQuery宽屏自动播放焦点图插件