swipe.js 带翻页

2016-03-16 14:49 SkyBlue 阅读(268) 评论(0) 收藏举报

<!DOCTYPE>
<html>
<meta charset="utf-8"/>
<style>
.header{
    text-align:center;
    font:40px/70px "微软雅黑";
    height:70px;
}
.firstPart{
    position:relative;
}
.threeWrap{
    float:left;
    width:33.33%;
}
.threeImg{
    width:100%;
}
.appImg{
    width:100%;
}
.fourLeft{
    float:left;
    width:40%;
}
.fourRight{
    float:left;
    width:60%;
}
.fourSubTwo{
    float:left;
    width:50%;
}
.fifthPart{
    clear:both;
}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
  /* END required styles */
.pageNum{
    text-align:center;
    list-style:none;
    margin:0;
    padding:0
}
.pageNum li {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:10px;
    background:#141414;
    box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020;
    margin:0 2px;
    cursor:pointer
}
.pageNum li.on {
    box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
    background-color:#1293dc;
    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
    background-image:-webkit-linear-gradient(top,#1293dc,#0f6297);
    background-image:-moz-linear-gradient(top,#1293dc,#0f6297);
    background-image:-ms-linear-gradient(top,#1293dc,#0f6297);
    background-image:-o-linear-gradient(top,#1293dc,#0f6297);
    background-image:linear-gradient(top,#1293dc,#0f6297)
}
.pageNum-wrap{
    position:absolute;
    bottom:15px;
    width:100%;
}
    
</style>
<body>
<div class="header">
银行网点来宾无线营销解决方案
</div>
<div class="firstPart">
    <div id='slider' class='swipe'>
      <div class='swipe-wrap'>
        <div><img class="threeImg" src="images/b1.png"/></div>
        <div><img class="threeImg" src="images/b2.png"/></div>
        <div><img class="threeImg" src="images/b3.png"/></div>
      </div>
    </div>
    <div class="pageNum-wrap">
        <ul class="pageNum" id="pagtionPos">
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>    

<div class="secondPart">
    <div class="threeWrap">
        <img class="threeImg" src="images/idx-03.png"/>
    </div>
    <div class="threeWrap">
        <img class="threeImg" src="images/idx-04.png"/>
    </div>
    <div class="threeWrap">
        <img class="threeImg" src="images/idx-05.png"/>
    </div>
</div>

<div class="thirdPart">
    <img class="appImg" src="images/idx-06.png"/>
</div>

<div class="fouthPart">
    <div class="fourLeft">
        <img src="images/idx-07.png" width="100%"/>
    </div>
    <div class="fourRight">
        <div class="fourSubTop">
            <img src="images/idx-08.png" width="100%"/>
        </div>
        <div class="fourSubBottom">
            <div class="fourSubTwo">
                <img src="images/idx-09.png" width="100%"/>
            </div>
            <div class="fourSubTwo">
                <img src="images/idx-10.png" width="100%"/>
            </div>
        </div>
    </div>
<div>

<div class="fifthPart">
    <img src="images/idx-12.png" width="100%"/>
</div>
</body>
<script src="../js/common/swipe/swipe.js"></script>
<script>
var bullets = document.getElementById('pagtionPos').getElementsByTagName('li');
window.mySwipe = new Swipe(document.getElementById('slider'), {
    auto: 1000,
     callback: function(index) {
         var i = bullets.length;
         while(i--){
             bullets[i].className='';
         }
         bullets[index].className='on';
     }
});                  
</script>
</html>

<!DOCTYPE><html><meta charset="utf-8"/><style>.header{text-align:center;font:40px/70px "微软雅黑";height:70px;}.firstPart{position:relative;}.threeWrap{float:left;width:33.33%;}.threeImg{width:100%;}.appImg{width:100%;}.fourLeft{float:left;width:40%;}.fourRight{float:left;width:60%;}.fourSubTwo{float:left;width:50%;}.fifthPart{clear:both;}.swipe { overflow: hidden; visibility: hidden; position: relative;}.swipe-wrap { overflow: hidden; position: relative;}.swipe-wrap > div { float:left; width:100%; position: relative;} /* END required styles */.pageNum{ text-align:center; list-style:none; margin:0; padding:0}.pageNum li { display:inline-block; width:10px; height:10px; border-radius:10px; background:#141414; box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020; margin:0 2px; cursor:pointer}.pageNum li.on { box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5); background-color:#1293dc; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297)); background-image:-webkit-linear-gradient(top,#1293dc,#0f6297); background-image:-moz-linear-gradient(top,#1293dc,#0f6297); background-image:-ms-linear-gradient(top,#1293dc,#0f6297); background-image:-o-linear-gradient(top,#1293dc,#0f6297); background-image:linear-gradient(top,#1293dc,#0f6297)}.pageNum-wrap{ position:absolute; bottom:15px; width:100%;} </style><body><div class="header">银行网点来宾无线营销解决方案</div><div class="firstPart"><div id='slider' class='swipe'> <div class='swipe-wrap'> <div><img class="threeImg" src="images/b1.png"/></div> <div><img class="threeImg" src="images/b2.png"/></div> <div><img class="threeImg" src="images/b3.png"/></div> </div></div><div class="pageNum-wrap"> <ul class="pageNum" id="pagtionPos"> <li class="on"></li> <li></li> <li></li> </ul></div></div>
<div class="secondPart"><div class="threeWrap"><img class="threeImg" src="images/idx-03.png"/></div><div class="threeWrap"><img class="threeImg" src="images/idx-04.png"/></div><div class="threeWrap"><img class="threeImg" src="images/idx-05.png"/></div></div>
<div class="thirdPart"><img class="appImg" src="images/idx-06.png"/></div>
<div class="fouthPart"><div class="fourLeft"><img src="images/idx-07.png" width="100%"/></div><div class="fourRight"><div class="fourSubTop"><img src="images/idx-08.png" width="100%"/></div><div class="fourSubBottom"><div class="fourSubTwo"><img src="images/idx-09.png" width="100%"/></div><div class="fourSubTwo"><img src="images/idx-10.png" width="100%"/></div></div></div><div>
<div class="fifthPart"><img src="images/idx-12.png" width="100%"/></div></body><script src="../js/common/swipe/swipe.js"></script><script>var bullets = document.getElementById('pagtionPos').getElementsByTagName('li');window.mySwipe = new Swipe(document.getElementById('slider'), {auto: 1000, callback: function(index) { var i = bullets.length; while(i--){ bullets[i].className=''; } bullets[index].className='on'; }}); </script></html>

刷新页面返回顶部

SkyBlue

swipe.js 带翻页

About