使用jQuery创建百叶窗翻转动画的电子广告牌

Creating a Rotating Billboard System with jQuery and CSS 模拟城市高架上循环播放的电子广告牌。广告之间的切换动画使用了百叶窗翻转效果。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2363
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<body>
    <div class="palmtrees"></div>
    <div class="powerline"></div>
    <div class="city"></div>
    <div class="container">
        <div class="ad">
            <div id="ad_1" class="ad_1">
                <img class="slice_1" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice01.jpg" />
                <img class="slice_2" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice02.jpg" />
                <img class="slice_3" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice03.jpg" />
                <img class="slice_4" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice04.jpg" />
                <img class="slice_5" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice05.jpg" />
                <img class="slice_6" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice06.jpg" />
                <img class="slice_7" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice07.jpg" />
                <img class="slice_8" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice08.jpg" />
                <img class="slice_9" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice09.jpg" />
                <img class="slice_10" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice10.jpg" />
                <img class="slice_11" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice11.jpg" />
                <img class="slice_12" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice12.jpg" />
                <img class="slice_13" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice13.jpg" />
                <img class="slice_14" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice14.jpg" />
                <img class="slice_15" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice15.jpg" />
                <img class="slice_16" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice16.jpg" />
                <img class="slice_17" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice17.jpg" />
                <img class="slice_18" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice18.jpg" />
                <img class="slice_19" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice19.jpg" />
                <img class="slice_20" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice20.jpg" />
                <img class="slice_21" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice21.jpg" />
                <img class="slice_22" src="https://tympanus.net/Tutorials/Billboard/ads/ad1_slice22.jpg" />
            </div>
            <div id="ad_2" class="ad_2">
                <img class="slice_1" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice01.jpg" />
                <img class="slice_2" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice02.jpg" />
                <img class="slice_3" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice03.jpg" />
                <img class="slice_4" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice04.jpg" />
                <img class="slice_5" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice05.jpg" />
                <img class="slice_6" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice06.jpg" />
                <img class="slice_7" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice07.jpg" />
                <img class="slice_8" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice08.jpg" />
                <img class="slice_9" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice09.jpg" />
                <img class="slice_10" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice10.jpg" />
                <img class="slice_11" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice11.jpg" />
                <img class="slice_12" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice12.jpg" />
                <img class="slice_13" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice13.jpg" />
                <img class="slice_14" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice14.jpg" />
                <img class="slice_15" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice15.jpg" />
                <img class="slice_16" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice16.jpg" />
                <img class="slice_17" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice17.jpg" />
                <img class="slice_18" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice18.jpg" />
                <img class="slice_19" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice19.jpg" />
                <img class="slice_20" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice20.jpg" />
                <img class="slice_21" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice21.jpg" />
                <img class="slice_22" src="https://tympanus.net/Tutorials/Billboard/ads/ad2_slice22.jpg" />
            </div>
        </div>
    </div>
    <div class="billboard"></div>
    <script src="/uploads/160101/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            $('#ad_1 > img').each(function(i, e) {
                rotate($(this), 500, 3000, i);
            });

</html>

Creating a Rotating Billboard System with jQuery and CSS 模拟城市高架上循环播放的电子广告牌。广告之间的切换动画使用了百叶窗翻转效果。

模板，教程

编辑器支持Emmet

快捷键

Creating a Rotating Billboard System with jQuery and CSS 模拟城市高架上循环播放的电子广告牌。广告之间的切换动画使用了百叶窗翻转效果。

模板，教程

使用CSS3和jQuery创建的文字排版特效 - 折半翻转

使用jQuery Booklet插件创建笔记本翻页动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：