javascript - 位置 swipejs 的积分

Question

我在我的 jquery 移动应用程序中添加了一个 swipeJS 照片幻灯片。我有一个问题。我想要这样的分数来计算页面上的图片数量:http://swipejs.com/

我在我的元素中添加了以下 html 和 css，但它只显示垂直点并且没有任何格式，如更大/更小。

CSS:

#position {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#position 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;
}

#position 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);
}

HTML:

<div data-role="content" id="contentPics">
   <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
            <div class='swipe-wrap' id="picSwipe">
              <div><b>Pic</b></div>
              <div><b>Pic2</b></div>
            </div>
  </div>
    <nav>

    <ul id='position'>
      <li class='on'></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </nav>

没有点的 fiddle 示例:http://jsfiddle.net/Spokey/unTHs/3/

Answer 1

工作示例:http://jsfiddle.net/Gajotres/d9Qnu/

Javascript:

var elem = document.getElementById('mySwipe');
var bullets = document.getElementById('position').getElementsByTagName('li');

window.mySwipe = Swipe(elem, {
    continuous: true,
    callback: function(pos) {      
      var i = bullets.length;
      while (i--) {
        bullets[i].className = ' ';
      }
      bullets[pos].className = 'on';

    }
});

HTML :

<div id="slider" data-role="page">
    <div data-role="content" id="contentSlider">
        <div id='mySwipe' style='min-width:500px; margin:0 auto' class='swipe'>
            <div class='swipe-wrap'>
                <div><b>1</b>
                </div>
                <div><b>2</b>
                </div>
                <div><b>3</b>
                </div>
            </div>
        </div>
        <div style='text-align:center;padding-top:20px;'>
            <button onclick='mySwipe.prev()'>prev</button>
            <button onclick='mySwipe.next()'>next</button>
        </div>
    </div>
    <nav data-theme="a" data-role="footer" data-position="fixed" id="footer">
        <ul id='position'>
            <li class='on'></li>
            <li></li>
            <li></li>
        </ul>       
    </nav>    
</div>

CSS:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  -webkit-text-size-adjust:none;
  font-family:sans-serif;
  min-height:416px;
}
h1 {
  font-size:33px;
  margin:50px 0 15px;
  text-align:center;
  color:#212121;
}
h2 {
  font-size:14px;
  font-weight:bold;
  color:#3c3c3c;
  margin:20px 10px 10px;
}
small {
  margin:0 10px 30px;
  display:block;
  font-size:12px;
}
a {
  margin:0 0 0 10px;
  font-size:12px;
  color:#3c3c3c;
}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  width:80%;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}


html, body {
  background: #f3f3f3;
}

#console {
  font-size: 12px;
  font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  color: #999;
  line-height: 18px;
  margin-top: 20px;
  max-height: 150px;
  overflow: auto;
}

#mySwipe div b {
  display:block;
  font-weight:bold;
  color:#14ADE5;
  font-size:20px;
  text-align:center;
  margin:10px;
  padding:100px 10px;
  box-shadow: 0 1px #EBEBEB;
  background: #fff;
  border-radius: 3px;
  border: 1px solid;
  border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}


#footer {
    height: 50px;
}

#position {
    margin-left: auto;
    margin-right: auto;   
    width: 60px;
}

#position 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;
}

#position 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);
}