allinone_contentSlider.js 带内容幻灯片插件,自适应移动端

 allinone_contentSlider.js 带内容幻灯片插件,自适应移动端

allinone_contentSlider.js 带内容幻灯片插件,自适应移动端

第一步引入bfwone

第二步执行插件代码

示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><title>BFW NEW PAGE</title><script id="bfwone" data="dep=jquery.17|jquery-ui.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["allinone_contentSlider", "allinone_contentSlider"], function() {
                $('#allinone_contentSlider_common').allinone_contentSlider({

                    skin: 'common',

                    width: 960,

                    height: 460,

                    responsive: true,

                    autoHideBottomNav: false,

                    showPreviewThumbs: false,

                    autoHideNavArrows: false

                });


            });
        });
    </script>
</head>
<body>

    <!-- 代码开始 -->

    <div style="background:#CCC">

        <div id="containingDiv">

            <div id="allinone_contentSlider_common">

                <ul class="allinone_contentSlider_list">

                    <li data-text-id="#allinone_contentSlider_photoText1"><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" width="960" height="460" alt="" /></li>

                    <li data-text-id="#allinone_contentSlider_photoText3"><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" width="960" height="460" alt="" /></li>

                    <li data-text-id="#allinone_contentSlider_photoText1"><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" width="960" height="460" alt="" /></li>

                    <li data-text-id="#allinone_contentSlider_photoText4"><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" width="960" height="460" alt="" /></li>

                </ul>



                <div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts">

                    <div class="allinone_contentSlider_text_line textElement11_common" data-initial-left="355" data-initial-top="-30" data-final-left="355" data-final-top="45" data-duration="0.5" data-fade-start="0" data-delay="0">
                        You can cutomize this <br />

                        Content-Slider in so many ways
                    </div>

                    <div class="allinone_contentSlider_text_line textElement12_common" data-initial-left="355" data-initial-top="30" data-final-left="355" data-final-top="115" data-duration="0.5" data-fade-start="0" data-delay="0">
                        Only your imagination is the limit. You'll see here just a few examples of what you can do.
                    </div>

                    <div class="allinone_contentSlider_text_line" data-initial-left="300" data-initial-top="210" data-final-left="355" data-final-top="210" data-duration="0.5" data-fade-start="0" data-delay="0.5">
                        <img src="http://repo.bfw.wiki/bfwrepo/image/star-on.png" width="28" height="26" alt="" />
                    </div>

                    <div class="allinone_contentSlider_text_line textElement13_common" data-initial-left="410" data-initial-top="210" data-final-left="410" data-final-top="210" data-duration="0.5" data-fade-start="0" data-delay="0.3">
                        You'll see here just a few examples of <br />

                        what you can do. Only your imagination is the limit.
                    </div>

                    <div class="allinone_contentSlider_text_line" data-initial-left="300" data-initial-top="290" data-final-left="355" data-final-top="290" data-duration="0.5" data-fade-start="0" data-delay="0.8">
                        <img src="http://repo.bfw.wiki/bfwrepo/image/star-on.png" width="28" height="26" alt="" />
                    </div>

                    <div class="allinone_contentSlider_text_line textElement13_common" data-initial-left="410" data-initial-top="280" data-final-left="410" data-final-top="280" data-duration="0.5" data-fade-start="0" data-delay="0.5">
                        You can cutomize this Content-Slider in so many ways. <br />

                        We hope your imagination has no limit.
                    </div>

                </div>

                <div id="allinone_contentSlider_photoText3" class="allinone_contentSlider_texts">

                    <div id="31" class="allinone_contentSlider_text_line" data-initial-left="0" data-initial-top="50" data-final-left="0" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="32" class="allinone_contentSlider_text_line" data-initial-left="0" data-initial-top="-30" data-final-left="0" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="33" class="allinone_contentSlider_text_line" data-initial-left="625" data-initial-top="-50" data-final-left="625" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="312" class="allinone_contentSlider_text_line textElement32_common" data-initial-left="40" data-initial-top="85" data-final-left="40" data-final-top="255" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <a href="bfw.wiki" target="_blank">Right Side Playlist</a>
                    </div>

                    <div id="313" class="allinone_contentSlider_text_line textElement33_common" data-initial-left="40" data-initial-top="130" data-final-left="780" data-final-top="78" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                </div>

                <div id="allinone_contentSlider_photoText4" class="allinone_contentSlider_texts">

                    <div id="41" class="allinone_contentSlider_text_line" data-initial-left="20" data-initial-top="75" data-final-left="480" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="42" class="allinone_contentSlider_text_line" data-initial-left="60" data-initial-top="-30" data-final-left="60" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="43" class="allinone_contentSlider_text_line" data-initial-left="300" data-initial-top="80" data-final-left="0" data-final-top="80" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="412" class="allinone_contentSlider_text_line textElement32_common" data-initial-left="30" data-initial-top="255" data-final-left="30" data-final-top="255" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                    <div id="413" class="allinone_contentSlider_text_line textElement33_common" data-initial-left="40" data-initial-top="125" data-final-left="780" data-final-top="125" data-duration="0.5" data-fade-start="0" data-delay="0">

                    </div>

                </div>

            </div>

        </div>

    </div>




</body>
</html>


立即下载 allinone_contentSlider.js查看所有js插件

网友评论0

程序员在线工具箱