一款基于jQuery和HTML5全屏焦点图

最新推荐文章于 2021-05-31 04:04:31 发布

转载最新推荐文章于 2021-05-31 04:04:31 发布 · 263 阅读

文章标签：

#javascript #ViewUI

本文介绍了一款采用jQuery并结合HTML5与CSS3特性的全屏焦点图插件，该插件提供了多种图片过渡效果，适用于创建大气且整体感强的网站头部轮播图。

今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件，同时这款焦点图也利用了HTML5和CSS3的相关特性，使图片切换效果更加丰富多彩。另外，这款jQuery焦点图插件的特点是全屏的效果，因此看上去也非常的大气和整体。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<div id="wrapper">
        <div class="fullwidthbanner-container">
            <div class="fullwidthbanner">
                <ul>
                    <li data-transition="3dcurtain-horizontal" data-slotamount="15" data-masterspeed="300">
                        <img src="images/slides/slide3.jpg" alt="" />
                    </li>
                    <li data-transition="3dcurtain-vertical" data-slotamount="15" data-masterspeed="300"
                        data-link="#">
                        <img src="images/slides/slide5.jpg" alt="" />
                    </li>
                    <li data-transition="papercut" data-slotamount="15" data-masterspeed="300" data-link="#">
                        <img src="images/slides/slide2.jpg" alt="" />
                    </li>
                    <li data-transition="turnoff" data-slotamount="15" data-masterspeed="300">
                        <img src="images/slides/slide1.jpg" alt="" />
                    </li>
                    <li data-transition="flyin" data-slotamount="15" data-masterspeed="300">
                        <img src="images/slides/slide6.jpg" alt="" />
                    </li>
                </ul>
            </div>
        </div>
    </div>

　　via:http://***/Article/15711