jQuery支持鼠标滚动的垂直滚动手风琴

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

手风琴图片列表和上一张、下一张按钮html代码

<div id="va-accordion" class="va-container"> 
    <div class="va-nav"> 
        <span class="va-nav-prev">Previous</span> 
        <span class="va-nav-next">Next</span> 
    </div> 
    <div class="va-wrapper"> 
        <div class="va-slice va-slice-1"> 
            <h3 class="va-title">Marketing</h3> 
            <div class="va-content"> 
                <p>Henry Watson</p> 
                <ul> 
                    <li><a href="http://www.sucaihuo.com/js/522.html" target="_blank">jquery文字上下滚动</a> </li> 
                    <li><a href="http://www.sucaihuo.com/js/523.html" target="_blank">jQuery省市区三级联动</a> </li> 
                    <li><a href="http://www.sucaihuo.com/js/524.html" target="_blank">Thinkphp各大支付平台在线支付</a> </li> 
                </ul> 
            </div> 
        </div> 
        <div class="va-slice va-slice-2"> 
            <h3 class="va-title">Management</h3> 
            <div class="va-content"> 
                <p>Keith Johnson</p> 
                <ul>
                    <li><a href="http://www.sucaihuo.com/js/117.html" target="_blank">jQuery+PHP数字统计动态展示效果</a> </li> 
                    <li><a href="http://www.sucaihuo.com/js/118.html" target="_blank">PHP+jQuery翻牌抽奖</a> </li> 
                    <li><a href="http://www.sucaihuo.com/js/119.html" target="_blank">datetimepicker日期时间插件</a> </li> 
                </ul> 
            </div> 
        </div> 
    </div> 
</div>

引入easing动画插件、mousewheel鼠标滚动插件和手风琴插件vaccordion.js

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>

演示一：默认效果

$('#va-accordion').vaccordion();

演示二：动画效果

$('#va-accordion').vaccordion({
    expandedHeight: 450,
    animSpeed: 500,
    animEasing: 'easeInOutBack',
    animOpacity: 0.4
});

vaccordion.js插件API教程