Supersized相册全屏切换插件

收藏

Supersized 是一款功能强大的图片切换插件，支持等比例缩放图片填充成全屏效果，支持滑动和淡入淡出等多种动画切换效果。

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

查看演示

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

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

HTML

<div id="loading"></div><!---正则加载...----> 
<div id="supersized"></div><!---展示的图片列表...----> 
<div id="prevthumb"></div><!---上一张缩略图...----> 
<div id="nextthumb"></div><!---下一张缩略图...----> 
<div id="controls-wrapper"><!---#controls-wrapper控制条，放置控制按钮，以及图片标题内容----> 
    <div id="controls"> 
        <div id="slidecounter"><!---当前图片和总图片数量----> 
            <span class="slidenumber"> 
            </span> 
            / 
            <span class="totalslides"> 
            </span> 
        </div> 
        <div id="slidecaption"></div><!---标题区域----> 
        <div id="navigation"> 
            <img id="prevslide" src="images/back_dull.png" /><!---后退按钮----> 
            <img id="pauseplay" src="images/pause_dull.png" /><!---暂停按钮----> 
            <img id="nextslide" src="images/forward_dull.png" /><!---前进按钮----> 
        </div> 
        <a href="http://www.erdangjiade.com/js/67.html" style=" position:absolute; top:20px; right:300px"> 
            查看教程 
        </a> 
    </div> 
</div>

jQuery

$(function() { 
    $.fn.supersized.options = { 
        vertical_center: 1,//是否让图像垂直居中，如果为0，则图像为顶端对齐。 
        slideshow: 1,//是否显示展示工具条，包括标题、图片数字和导航按钮。 
        navigation: 1,//是否展示导航按钮。 
        thumbnail_navigation: 1,//为1时可以通过单击缩略图导航切换图片，为0时，缩略图不显示。 
        transition: 1,//0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left 
        pause_hover: 0,//是否鼠标滑向图片时暂停图片切换。 
        slide_counter: 1,//是否显示切换图片的数字。 
        slide_captions: 1,//是否显示图片标题。 
        slide_interval: 3000,//图片切换间隔时间（毫秒） 
        autoplay: true,//是否自动播放。 
        transition_speed: 750,//切换速度 
        keyboard_nav: true,//是否支持键盘操作切换。 
        slides: [ //所切换的图片集合，包括图片地址image，图片标题title，图片链接url。 
        { 
            image: 'slides/tower.jpg', 
            title: 'City Clock Tower', 
            url: 'http://www.erdangjiade.com' 
        }, 
        { 
            image: 'slides/fence.jpg', 
            title: 'Canal Park Fence', 
            url: 'http://www.erdangjiade.com/js.html' 
        }, 
        { 
            image: 'slides/tracks.jpg', 
            title: 'Old Train Tracks', 
            url: 'http://www.erdangjiade.com/templates.html' 
        }] 
    }; 
    $('#supersized').supersized(); 
});