flux.slider_使用Flux Slider jQuery插件

cuketao5066

于 2020-08-04 05:58:23 发布

阅读量298

点赞数

文章标签： css html js less gwt ViewUI

原文链接：https://www.script-tutorials.com/using-flux-slider-jquery-plugin/

版权

flux.slider

Using Flux Slider jQuery plugin Today I will make review (example of implementation) of fresh and cool slider plugin – Flux. This slider using CSS3 animation with great transition effects (like: bars, zip, blinds, blocks, concentric, warp). And, what is most great – now it can support 3D transitions too (bars3d, cube, tiles3d, Blinds3D effects). Of course, not all browsers support 3D transitions (I tested in Chrome – can confirm that it working here).

使用Flux Slider jQuery插件今天，我将回顾一下新鲜而酷的Slider插件– Flux (实现示例)。该滑块使用CSS3动画，具有出色的过渡效果(例如：条形，拉链，百叶窗，块，同心，翘曲)。而且，最棒的是–现在它也可以支持3D过渡(bars3d，cube，tiles3d，Blinds3D效果)。当然，并不是所有的浏览器都支持3D转换(我在Chrome中进行了测试-可以确认它在这里可以正常工作)。

Here are list of supported browsers:

以下是受支持的浏览器列表：

Chrome
Chrome
Firefox 4
Firefox 4
iOS
的iOS
Opera 11
歌剧11
Safari
苹果浏览器

Firstly – you can download our package and check demo:

首先–您可以下载我们的软件包并查看演示：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Lets start coding !

让我们开始编码！

步骤1. HTML (Step 1. HTML)

Here are source code of our sample:

这是我们示例的源代码：

index.html (index.html)


<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Flux Slider example</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <script src="js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Flux Slider example</a></h3>
            <div id="slider">
                <img src="data_images/pic1.jpg" alt="" />
                <img src="data_images/pic2.jpg" alt="" />
                <img src="data_images/pic3.jpg" alt="" />
                <img src="data_images/pic4.jpg" alt="" />
                <img src="data_images/pic5.jpg" alt="" />
                <img src="data_images/pic6.jpg" alt="" />
                <img src="data_images/pic7.jpg" alt="" />
                <img src="data_images/pic8.jpg" alt="" />
                <img src="data_images/pic9.jpg" alt="" />
                <img src="data_images/pic10.jpg" alt="" />
            </div>
            <hr />
            <div id="transitions">
                <ul id="trans2D" class="transitions">
                    <li><b>2D Transitions</b></li>
                    <li><a href="#" id="bars">Bars</a></li>
                    <li><a href="#" id="zip">Zip</a></li>
                    <li><a href="#" id="blinds">Blinds</a></li>
                    <li><a href="#" id="blocks">Blocks</a></li>
                    <li><a href="#" id="concentric">Concentric</a></li>
                    <li><a href="#" id="warp">Warp</a></li>
                </ul>
                <ul id="trans3d" class="transitions">
                    <li><b>3D Transitions</b></li>
                    <li><a href="#" id="bars3d">Bars3D</a></li>
                    <li><a href="#" id="cube">Cube</a></li>
                    <li><a href="#" id="tiles3d">Tiles3D</a></li>
                    <li><a href="#" id="blinds3d">Blinds3D</a></li>
                </ul>
                <ul id="controls">
                    <li><b>Controls</b></li>
                    <li><a href="#" id="start">Play</a></li>
                    <li><a href="#" id="stop">Pause</a></li>
                    <li><a href="#" id="next">Next</a></li>
                    <li><a href="#" id="prev">Prev</a></li>
                </ul>
            </div>
            <div id="warn" style="display:none"></div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Flux Slider example</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <script src="js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Flux Slider example</a></h3>
            <div id="slider">
                <img src="data_images/pic1.jpg" alt="" />
                <img src="data_images/pic2.jpg" alt="" />
                <img src="data_images/pic3.jpg" alt="" />
                <img src="data_images/pic4.jpg" alt="" />
                <img src="data_images/pic5.jpg" alt="" />
                <img src="data_images/pic6.jpg" alt="" />
                <img src="data_images/pic7.jpg" alt="" />
                <img src="data_images/pic8.jpg" alt="" />
                <img src="data_images/pic9.jpg" alt="" />
                <img src="data_images/pic10.jpg" alt="" />
            </div>
            <hr />
            <div id="transitions">
                <ul id="trans2D" class="transitions">
                    <li><b>2D Transitions</b></li>
                    <li><a href="#" id="bars">Bars</a></li>
                    <li><a href="#" id="zip">Zip</a></li>
                    <li><a href="#" id="blinds">Blinds</a></li>
                    <li><a href="#" id="blocks">Blocks</a></li>
                    <li><a href="#" id="concentric">Concentric</a></li>
                    <li><a href="#" id="warp">Warp</a></li>
                </ul>
                <ul id="trans3d" class="transitions">
                    <li><b>3D Transitions</b></li>
                    <li><a href="#" id="bars3d">Bars3D</a></li>
                    <li><a href="#" id="cube">Cube</a></li>
                    <li><a href="#" id="tiles3d">Tiles3D</a></li>
                    <li><a href="#" id="blinds3d">Blinds3D</a></li>
                </ul>
                <ul id="controls">
                    <li><b>Controls</b></li>
                    <li><a href="#" id="start">Play</a></li>
                    <li><a href="#" id="stop">Pause</a></li>
                    <li><a href="#" id="next">Next</a></li>
                    <li><a href="#" id="prev">Prev</a></li>
                </ul>
            </div>
            <div id="warn" style="display:none"></div>
        </div>
    </body>
</html>

This page contain set of images (for slider), and different extra controls (this is not necessary of course, but it will demonstrate all possibilities): for selecting transitions effect for next image, and for control: Play/Pause/Next/Prev buttons.

此页面包含一组图像(用于滑块)，以及不同的其他控件(当然这不是必需的，但是它将演示所有可能性)：用于选择下一张图像的过渡效果，以及用于控件：播放/暂停/下一个/上一个纽扣。

步骤2. CSS (Step 2. CSS)

Here are used CSS file with styles of our demo:

以下是带有我们演示样式CSS文件：

css / main.css (css/main.css)


body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*customization of slider*/
#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}
#warn {
    font-weight:bold;
    text-align:center;
}


body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*customization of slider*/
#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}
#warn {
    font-weight:bold;
    text-align:center;
}

All styles of that slider – customizable. You can wrap whole gallery with border, apply any background color, change styles of pagination elements – anything what you want.

该滑块的所有样式–可自定义。您可以用边框包裹整个画廊，应用任何背景颜色，更改分页元素的样式-任何您想要的。

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

js / main.js (js/main.js)


$(function(){
    // if browser not support transitions at all - we will display some warn message
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
    }
    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });
    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();
        // we will inform member is any 3D transform not supported by browser
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }
        // using custom transition effect
        window.mf.next(event.target.id);
    });
    $('#controls').bind('click', function(event) {
        event.preventDefault();
        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});


$(function(){
    // if browser not support transitions at all - we will display some warn message
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
    }
    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });
    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();
        // we will inform member is any 3D transform not supported by browser
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }
        // using custom transition effect
        window.mf.next(event.target.id);
    });
    $('#controls').bind('click', function(event) {
        event.preventDefault();
        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});

Initialization itself very easy – via calling its constructor: new flux.slider. As params – we pointing selector of our slider (‘#slider’), and set of params: autoplay, pagination, delay. We can also set another one param: transitions (as array) with all names of the transitions to use. Here are all another necessary files:

初始化本身非常容易–通过调用其构造函数：new flux.slider。作为参数-指向滑块的选择器('#slider')，以及一组参数：自动播放，分页，延迟。我们还可以设置另一个参数：转换(作为数组)以及要使用的所有转换名称。这是所有其他必需文件：

js / jquery-1.5.2.min.js和js / flux.min.js (js/jquery-1.5.2.min.js and js/flux.min.js)

This is default jQuery library and our new plugin. Available in our package.

这是默认的jQuery库和我们的新插件。在我们的包装中可用。

现场演示

结论 (Conclusion)

Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!

今天，我告诉您如何使用助焊剂插件构建滑块。确保您会乐于使用它。祝好运！

翻译自: https://www.script-tutorials.com/using-flux-slider-jquery-plugin/

flux.slider

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flux.slider_使用Flux Slider jQuery插件

flux.sliderUsing Flux Slider jQuery plugin Today I will make review (example of implementation) of fresh and cool slider plugin – Flux. This slider using CSS3 animation with great transition effects (...
复制链接

扫一扫