jQuery支持不同方向滚动的焦点图

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

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

3D面板滚动html代码

<div id="slider">
    <div id="slider-panels">
        <div id="slider-panels-next"><span class="iconb" data-icon="&#xe24e;"></span></div>
        <div id="slider-panels-previous"><span class="iconb" data-icon="&#xe24b;"></span></div>
        <div id="slider-panel-images">
            <a href='http://www.sucaihuo.com/js/537.html' target='_blank'><img src="_assets/1.jpg" width="900" height="400" alt='带封面的HTML5手机音频播放器'  /></a>
            <a href='http://www.sucaihuo.com/js/538.html' target='_blank'><img src="_assets/2.jpg" width="900" height="400" alt='jQuery圣诞下雪花'  /></a>
            <a href='http://www.sucaihuo.com/js/539.html' target='_blank'><img src="_assets/3.jpg" width="900" height="400" alt='web在线设计流程图'  /></a>
            <a href='http://www.sucaihuo.com/js/540.html' target='_blank'><img src="_assets/4.jpg" width="900" height="400" alt='jQuery圣诞节漫天小雪花和雪球飘落'  /></a>

        </div>
        <div id="slider-panel-left">
            <div id="slider-panel-left-carousel"></div>
        </div>
        <div id="slider-panel-center">
            <div id="slider-panel-center-carousel"></div>
        </div>
        <div id="slider-panel-right">
            <div id="slider-panel-right-carousel"></div>
        </div>
    </div>
    <div id="slider-dots"></div>
</div>

js/3-panel-slider.js

var slideTiming = 10000; // 间隔时间 毫秒
var animationTime = 500; // 动画时间 毫秒
var controlsHideTime = 200; // 上下按钮隐藏时间
var current = 1; // 初始化第几张幻灯片

鼠标悬浮在滑动面板上，上下页样式切换

$("#slider-panels").hover(function() {
    $("#slider-panels-next").show("drop", {direction: "right"}, controlsHideTime);
    $("#slider-panels-previous").show("drop", {direction: "left"}, controlsHideTime);
}, function() {
    $("#slider-panels-next").hide("drop", {direction: "right"}, controlsHideTime);
    $("#slider-panels-previous").hide("drop", {direction: "left"}, controlsHideTime);
});