首頁 > 開發者 > 手機程式開發

App輪播圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   color   io   os   ar   java   for   

<!doctype html><html><head>    <meta charset="utf-8">        <title>手機輪播圖</title>        <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>        <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>        <!-- 輪播圖js -->            <script type="text/javascript" src="http://files.cnblogs.com/xinlinux/iscroll.js"></script>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>        </head><script type="text/javascript">    var myScroll;    function loaded() {        myScroll = new iScroll(‘wrapper‘, {            snap: true,            momentum: false,            hScrollbar: false,            onScrollEnd: function() {                document.querySelector(‘#indicator > li.active‘).className = ‘‘;                document.querySelector(‘#indicator > li:nth-child(‘ + (this.currPageX + 1) + ‘)‘).className = ‘active‘;            }        });    }    document.addEventListener(‘DOMContentLoaded‘, loaded, false);</script><!-- 輪播圖樣式 --><style>        body{margin:0px;}        header{text-align:center;   position:relative;      overflow:hidden;}        ul{ margin:0px; padding:0px;list-style: none;}        #nav{ position:absolute; width:100%; height:20px; line-height:20px;   bottom:0px;}        #nav{ float:left; margin-right:5%; opacity:1;}         #nav ul li{ float:left; background:#fff; border-radius:10px; width:10px; height:10px; margin-left:10px; margin-top:5px; opacity:0.5;}        #nav ul li.active{ background:#fff;opacity:1;}        .banner img{width:100%;}        .banner ul li{ float:left;}</style><body>    <div class="row-fluid">        <header>                    <div class="banner">                <div id="wrapper" style="overflow: hidden; ">                    <div id="scroller">                        <ul id="thelist">                            <li>                                <a href="#"><img src="images/1.jpg" /></a>                            </li>                            <li>                            <a href="#"><img src="images/2.jpg" /></a>                            </li>                                                          <li>                                                            <a href="#"><img src="images/3.jpg" /></a>                                                        </li>                                                     </ul>                                            </div>                                    </div>                            </div>                        <div id="nav">                            <div id="prev" onclick="javascript:myScroll.scrollToPage(‘prev‘, 0);"></div>                                <ul id="indicator">                                    <li class="active"></li>                                        <li ></li>                                              <li ></li>                                      </ul>                                <div id="next" onclick="javascript:myScroll.scrollToPage(‘next‘, 0, 400, 2);"></div>                            </div>                        <div class="clr"></div>                    </header>    </div>                <script>        var count = document.getElementById("thelist").getElementsByTagName("img").length;        for (i = 0; i < count; i++) {            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";        }        document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";        setInterval(function() {            myScroll.scrollToPage(‘next‘, 0, 400, count);        }, 3500);        window.onresize = function() {            for (i = 0; i < count; i++) {                document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";            }            document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";        };    </script>                    </body></html>

 

App輪播圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More