jQuery支持不同方向滚动的焦点图_图片代码_图片轮播_焦点图轮播

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

淘建站为您提供更多_图片代码_图片轮播_焦点图轮播，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 461 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：图片代码 > 图片轮播难易程度：中级

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