注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

使用CSS3制做滑块画廊的超强jquery插件iPresenter

媒体 fishcity 1473浏览

jquery滑块画廊插件iPresenter

iPresenter是一个简单而强大的jQuery插件,它让用户轻松的使用CSS3动画效果,设计出各色各样的时尚动感画廊滑块,幻灯片

特点

基于jQuery制作。

高度灵活性和可定制性。

用户自定义界面设计。

允许多个实例在一个HTML页面。

自定义每张幻灯片动画效果。

多语言支持。

在iOS和Android设备上工作。

鼠标悬浮时可暂停幻灯片

容易调整大小。

兼容外部字体(如谷歌字体)。

动画预加载进度条。

支持键盘。

支持触屏。

通过css定制。

非常简单的配置。

无限的转换效果。

可定制的转换配置。

可定制的过渡时间函数。(easing)

接受Cubic-bezier(贝赛尔曲线)函数。

自定义每张幻灯片超时时间。

提示previewer缩略图。

缩略图或子弹导航。

扩展的HTML文档。

公共方法,属性和回调函数API(幻灯片,幻灯片e.t.c玩。)。

可在支持CSS3的所有现代浏览器工作。

jquery实例:iPresenter使用方法

基本的html结构

<!DOCTYPE html>
<html>
    <head>
        <title>iPresenter</title>
 
 
        <!-- Google Webfonts and our stylesheet -->
        <link rel="stylesheet" href="http://fonts.useso.com/css?family=PT+Sans+Narrow" />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/demo1.css" />
 
        <!-- JavaScript includes -->
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/ipresenter.encoded.js"></script>
 
        <!-- iPresenter script starter Section -->
        <script>
            $(document).ready(function(){
                $('#ipresenter').iPresenter();
            });
        </script>
    </head>
    <body>
 
        <!-- BEGIN CONTAINER -->
        <div class="container">
 
            <!-- BEGIN #ipresenter element container -->
            <div id="ipresenter">
 
                <!-- The Slides Will Go Here -->
 
            </div>
            <!-- END #ipresenter element container -->
 
        </div>
        <!-- END CONTAINER -->
 
    </body>
</html>

#ipresenter div是包含整个slider的,而ID是给ipresenter.js识别的

<div id="ipresenter">
 
    <!-- 幻灯片内容 -->
 
</div>

选项

ipresenter内容许多漂亮的动画效果,只需配置不同的参数便可实现。

data-easing – 动画效果函数 (接受自定义cubic-bezier 函数):

– linear

– ease

– ease-in

– ease-out

– ease-in-out

– ease-out-in

– easeInQuad

– easeOutQuad

– easeInOutQuad

– easeInCubic

– easeOutCubic

– easeInOutCubic

– easeInQuart

– easeOutQuart

– easeInOutQuart

– easeInQuint

– easeOutQuint

– easeInOutQuint

– easeInSine

– easeOutSine

– easeInOutSine

– easeInExpo

– easeOutExpo

– easeInOutExpo

– easeInCirc

– easeOutCirc

– easeInOutCirc

– easeInBack

– easeOutBack

– easeInOutBack

data-pausetime – 幻灯片展现的时间;

data-xdata-ydata-z 在屏幕中3维变换;

data-rotatedata-rotate-xdata-rotate-ydata-rotate-z rotate 元素沿各轴的转动 (单位:度);

data-scale – 放大或缩小;

data-thumbnail – 缩略图;

以下为实例幻灯片的html内容

<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
    <img src="img/details.png" />
    <h2>A phone that sees the world like you do, in 3D</h2>
    <p>Now your photos can have as much depth as the moment itself. HTC EVO 3D captures your photos and videos in 3D, plus you can view them without the glasses. The stunning 4.3-inch qHD display gives you crisp websites, vivid images and incredibly fluid videos.</p>
</div>
 
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180" data-easing="easeInOutQuint">
    <img src="img/ksp1.png" />
    <h2>Capture life in 3D</h2>
    <p>HTC EVO 3D allows you to shoot 3D movies and snap 3D photos via dual cameras, so no matter where you are, capture life as it should be. And see it all in true-to-life detail without 3D glasses.</p>
</div>
 
<!-- Same for the rest.. -->
<div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <img src="img/ksp2.png" />
    <h2>An incredible view</h2>
    <p>The large 4.3 inch display serves up incredibly crisp websites, vivid images and fluid video on a pixel-packed qHD screen. Catch the latest blockbusters straight from HTC Watch � a new service that starts the show just seconds into the download and monitors your Internet connection to ensure uninterrupted viewing.</p>
</div>

CSS样式结构,本处只给出结构,样式的实际内容可以根据项的需求完全自定义

/* === Preloader Section === */
 
    div#ipresenter div#preloader {
        some styles
    }
 
    div#ipresenter div#preloader div {
        some styles
    }
 
/* === Steps Section === */
     
    div#ipresenter div.step {
        some styles
    }
     
/* === Control Navigation Section === */
 
    /* = General = */
    a.ipresenter_stepsNav {
        some styles
    }
 
    /* = Next Button = */
    a#ipresenter_nextStep {
        some styles
    }
 
    /* = Previous Button = */
    a#ipresenter_prevStep {
        some styles
    }
 
    /* = Pagination Buttons Container = */
    div.ipresenter-controlNav {
        some styles
    }
 
    /* = Pagination Previous Buttons = */
    div.ipresenter-controlNav a.ipresenter-controlPrevNav {
        some styles
    }
 
    /* = Pagination Next Button = */
    div.ipresenter-controlNav a.ipresenter-controlNextNav {
        some styles
    }
 
    /* = Pagination Number Button = */
    div.ipresenter-controlNav a.ipresenter-control {
        some styles
    }
 
    /* = Pagination Tooltip = */
    div.ipresenter-controlNav div.ipresenter-tooltip {
        some styles
    }
 
    div.ipresenter-controlNav div.ipresenter-tooltip div {
        some styles
    }
 
    div.ipresenter-controlNav div.ipresenter-tooltip img {
        some styles
    }
     
/* === Playback === */
 
    /* = General = */
    #ipresenter-timer {
        some styles
    }
 
    /* = When its playing = */
    #ipresenter-timer.play {
        some styles
    }
 
    /* = When its paused = */
    #ipresenter-timer.pause {
        some styles
    }

任何图片都可以在"step"的样式类中定义,如果你需要编辑定义这些图片,可以用以下的样式来实现

div#ipresenter div.step img {
    change styles here
}

javascript

需要先引入jquery库,然后再引入ipresenter.js

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ipresenter.packed.js"></script>

基本初始化

$(document).ready(function(){
    $('#ipresenter').iPresenter();
});

还参数选项

$(document).ready(function(){
    $('#ipresenter').iPresenter({
        easing: 'ease-in-out', // 动画效果 (custom cubic-bezier function is acceptable)
        autoPlay: true, // 自动播放
        replay: true, // 循环播放
        animSpeed: 1000, // 动画时间 (Microsecond)
        pauseTime: 5000, // 展示时间 (Microsecond)
        directionNav: true, // 方向导航按钮
        directionNavHoverOpacity: 0.6, // 鼠标悬浮时透明度
        controlNav: true, // 1,2,3,4... 数字导航
        controlNavNextPrev: true, // 上下滑块导航
        controlNavHoverOpacity: 0.6, // 鼠标悬浮时透明度
        controlNavThumbs: false, // 显示缩略图
        controlNavTooltip: true, // 缩略图提示
        keyboardNav: true, // 激活键盘导航
        pauseOnHover: false, // 当鼠标滑过启用或禁用幻灯片
        itemsOpacity: 0.4, // 设置item的不透明度
        randomStart: false, // 随机显示
        startStep: 0, // 从第一滑块开始
        timer: 'Pie', // 计时器主题: "Pie", "360Bar" or "Bar"
        timerBg: '#000', // 计时器背景色
        timerColor: '#EEE', // 计时器颜色
        timerOpacity: 0.5, // T计时器透明透
        timerDiameter: 30, // 计时器直径
        timerPadding: 4, // 计时器内边距
        timerStroke: 3, // 计时器扫笔宽度
        timerBarStroke: 1, // 计时条宽度Timer Bar stroke width
        timerBarStrokeColor: '#EEE', // 计时条颜色
        timerBarStrokeStyle: 'solid', // 计时条风格Timer Bar stroke style
        timerPosition: 'top-right', // 计时器位置  (top,middle,bottom)-(left-center-right) set like: 'middle-center'
        nextLabel: "Next", // “下一个”按钮文字 (Multilanguage use)
        previousLabel: "Previous", // “上一个”按钮文字 (Multilanguage use)
        playLabel: "Play", // 播放按钮文字 (Multilanguage use)
        pauseLabel: "Pause", // 暂停按钮文字 (Multilanguage use)
        onBeforeChange: function(){}, // Triggers before a step change
        onAfterChange: function(){}, // Triggers after a step change
        onLastStep: function(){}, // Triggers when last step is shown
        onAfterLoad: function(){}, // Triggers when slider has loaded
        onPause: function(){}, // Triggers when slider has paused
        onPlay: function(){} // Triggers when slider has played
    });
});

转载请注明:jQ酷 » 使用CSS3制做滑块画廊的超强jquery插件iPresenter

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。