跨平臺移動開發手機上使用Iscroll.Js的Banner

時間 2019-11-20

標籤跨平臺移動開發手機使用 iscroll.js iscroll banner 欄目無線简体版

原文原文鏈接

二話不說，直接上圖，看效果javascript

須要使用Iscrollcss

示例代碼java

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Carousel</title>

<script src="content/scripts/iscroll.js"></script>

<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 type="text/css" media="all">
#wrapper {
    width:300px;
    height:160px;
    float:left;
    position:relative;    /* On older OS versions "position" and "z-index" must be defined, */
    z-index:1;            /* it seems that recent webkit is less picky and works anyway. */
    overflow:hidden;

    /*background:#aaa;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
    background:#e3e3e3; */
}

#scroller {
    width:2100px;
    height:100%;
    float:left;
    padding:0;
}

#scroller ul {
    list-style:none;
    display:block;
    float:left;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    text-align:left;
}

#scroller li {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    display:block; float:left;
    width:300px; height:160px;
    text-align:center;
    font-family:georgia;
    font-size:18px;
    line-height:140%;
}

#nav {
    width:300px;
    padding:0px 0px 0px 80px;
    margin:1px 2px 3px 4px;
    
}

#prev, #next {
    float:left;
    font-weight:bold;
    font-size:14px;
    padding:5px 0;
    width:80px;
}

#next {
    float:right;
    text-align:right;
}

#indicator, #indicator > li {
    display:block; float:left;
    list-style:none;
    padding:0; margin:0;
}

#indicator {
    width:110px;
    padding:0px 0 0 30px;
    margin:-16px 2px 3px 4px;
    position:relative;    /* On older OS versions "position" and "z-index" must be defined, */
    z-index:2;            /* it seems that recent webkit is less picky and works anyway. */
    overflow:hidden;
}

#indicator > li {
    text-indent:-9999em;
    width:8px; height:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    background:#ddd;
    overflow:hidden;
    margin-right:4px;
}

#indicator > li.active {
    background:#888;
}

#indicator > li:last-child {
    margin:0;
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li><img style="width: 280px;height: 160px;"  src="content/images/slides/leaf.jpg"></li>
            <li><img style="width: 280px;height: 160px;" src="content/images/slides/road.jpg"></li>
            <li><img style="width: 280px;height: 160px;" src="content/images/slides/sea.jpg"></li>
            <li><img style="width: 280px;height: 160px;" src="content/images/slides/shelter.jpg"></li>
            <li><img style="width: 280px;height: 160px;"  src="content/images/slides/tree.jpg"></li>
            <li><img style="width: 280px;height: 160px;" src="content/images/slides/bridge.jpg"></li>
            <li><img style="width: 280px;height: 160px;" src="content/images/slides/big_bunny_fake.jpg"></li>
        </ul>
    </div>

</div>
    <div id="nav">
    <!--<div id="prev" onClick="myScroll.scrollToPage('prev', 0);return false">&larr; prev</div>-->
    <ul id="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <!--<div id="next" onClick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>-->
</div>
</body>
</html>

代碼示例包web

點擊下載app

聲明：本博客高度重視知識產權保護，發現本博客發佈的信息包含有侵犯其著做權的連接內容時，請聯繫我，我將第一時間作相應處理,聯繫郵箱ffgign@qq.com。less

做者：Mark Fan (小念頭) 來源：http://cube.cnblogs.com
說明：未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。若有疑問，能夠經過 ffgign@qq.com 聯繫做者，本文章採用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可ide