一款基于jQuery的图片下滑切换焦点图插件

浏览数：23 / 时间：2015年06月09日

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

在线预览源码下载

下面是实现这款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"
});

});