點的位置swipejs

Question

我添加了swipeJS照片幻燈片到我的jquery移動應用程序。我有一個問題。 我要像在頁面上的圖片計數這樣幾點：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> 

例-撥弄而不點：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); 
} 

Answer 2

嘗試使用以下代碼

var bullets = document.getElementById('position').getElementsByTagName('li'); 
var elem = document.getElementById('mySwipe'); 
window.mySwipe = Swipe(elem, { 
    callback: function (pos) { 
     var i = bullets.length; 
     while (i--) { 
      bullets[i].className = ' '; 
     } 
     bullets[pos].className = 'on'; 
    } 
}); 

這將根據幻燈片編號更改.on class。

看到它在行動here