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

收藏

这个焦点图轮播支持图片不同方向切换，分页滚动等jQuery常用的幻灯片效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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.erdangjiade.com/js/537.html' target='_blank'><img src="_assets/1.jpg" width="900" height="400" alt='带封面的HTML5手机音频播放器'  /></a>
            <a href='http://www.erdangjiade.com/js/538.html' target='_blank'><img src="_assets/2.jpg" width="900" height="400" alt='jQuery圣诞下雪花'  /></a>
            <a href='http://www.erdangjiade.com/js/539.html' target='_blank'><img src="_assets/3.jpg" width="900" height="400" alt='web在线设计流程图'  /></a>
            <a href='http://www.erdangjiade.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);
});