如何在該腳本中添加項目符號？

Question

我有這樣的腳本：

https://jsfiddle.net/4zuzxdxf/14/

代碼HTML：

<div id="slideshow"> 

     <ul> 
      <li><img src="http://revistasindromes.com/images/100x100.gif" alt="photo1" /><p>asdas</p></li> 
      <li><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" alt="photo2" /><p>ddd</p></li> 
      <li><img src="http://www.matthijskamstra.nl/laboratory/flashbox/example_img/100x100pixels.gif" alt="photo3" /><p>eee</p></li> 

     </ul> 
     <a href="#" class="slideshow-prev">prev</a> 
     <a href="#" class="slideshow-next">next</a> 

    </div> 

CODE JS：

$('ul li').hide(); 
$('ul li:first').fadeIn(); 

setInterval(function() { 
       $('.slideshow-next').click(); 
}, 6000); 

var CurrentImage=0; 

var AllImages=$('#slideshow ul li').length; 

var NextImage=CurrentImage+1; 

$('.slideshow-next').click(function(){ 
     CurrentImage++; 
    if(CurrentImage>=AllImages) 
    { 
     CurrentImage=0; 
    } 
    $('ul li').hide(); 
    $('ul li').eq(CurrentImage).fadeIn(); 

}); 


$('.slideshow-prev').click(function(){ 
     CurrentImage--; 
    if(CurrentImage>=AllImages) 
    { 
     CurrentImage=0; 
    } 
    $('ul li').hide(); 
    $('ul li').eq(CurrentImage).fadeIn(); 

}); 

CODE CSS：

#slideshow 
{ 
    margin:0 auto; 
    width:100px; 
    height:150px; 
} 
ul{list-style:none;} 

我想爲此腳本添加項目符號...我添加了一個圖像以更好地理解他們想要的內容。

http://i61.tinypic.com/717286.jpg

我從來沒有這樣做，我需要儘可能簡單的一個例子。

你能幫我理解如何做到這一點嗎？

在此先感謝！

Answer 1

這裏有很多滑塊插件。 但是，如果你想要去的純粹CSS請查看以下fiddle

我發的圖片稍微大一點，可以很明顯的改變，只要你想

HTML

<ul class="slides"> 
    <input type="radio" name="radio-btn" id="img-1" checked /> 
    <li class="slide-container"> 
     <div class="slide"> 
      <img src="http://revistasindromes.com/images/100x100.gif" /> 
     </div> 
     <div class="nav"> 
      <label for="img-6" class="prev">&#x2039;</label> 
      <label for="img-2" class="next">&#x203a;</label> 
     </div> 
    </li> 
    <input type="radio" name="radio-btn" id="img-2" /> 
    <li class="slide-container"> 
     <div class="slide"> 
      <img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" /> 
     </div> 
     <div class="nav"> 
      <label for="img-1" class="prev">&#x2039;</label> 
      <label for="img-3" class="next">&#x203a;</label> 
     </div> 
    </li> 
    <input type="radio" name="radio-btn" id="img-3" /> 
    <li class="slide-container"> 
     <div class="slide"> 
      <img src="http://www.matthijskamstra.nl/laboratory/flashbox/example_img/100x100pixels.gif" /> 
     </div> 
     <div class="nav"> 
      <label for="img-2" class="prev">&#x2039;</label> 
      <label for="img-4" class="next">&#x203a;</label> 
     </div> 
    </li> 
    <li class="nav-dots"> 
     <label for="img-1" class="nav-dot" id="img-dot-1"></label> 
     <label for="img-2" class="nav-dot" id="img-dot-2"></label> 
     <label for="img-3" class="nav-dot" id="img-dot-3"></label> 
    </li> 
</ul> 

CSS

.slides { 
    padding: 0; 
    width: 609px; 
    height: 420px; 
    display: block; 
    margin: 0 auto; 
    position: relative; 
} 
.slides * { 
    user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 
.slides input { 
    display: none; 
} 
.slide-container { 
    display: block; 
} 
.slide { 
    top: 0; 
    opacity: 0; 
    width: 609px; 
    height: 420px; 
    display: block; 
    position: absolute; 
    transform: scale(0); 
    transition: all .7s ease-in-out; 
} 
.slide img { 
    width: 100%; 
    height: 100%; 
} 
.nav label { 
    width: 200px; 
    height: 100%; 
    display: none; 
    position: absolute; 
    opacity: 0; 
    z-index: 9; 
    cursor: pointer; 
    transition: opacity .2s; 
    color: #FFF; 
    font-size: 156pt; 
    text-align: center; 
    line-height: 380px; 
    font-family:"Varela Round", sans-serif; 
    background-color: rgba(255, 255, 255, .3); 
    text-shadow: 0px 0px 15px rgb(119, 119, 119); 
} 
.slide:hover + .nav label { 
    opacity: 0.5; 
} 
.nav label:hover { 
    opacity: 1; 
} 
.nav .next { 
    right: 0; 
} 
input:checked + .slide-container .slide { 
    opacity: 1; 
    transform: scale(1); 
    transition: opacity 1s ease-in-out; 
} 
input:checked + .slide-container .nav label { 
    display: block; 
} 
.nav-dots { 
    width: 100%; 
    bottom: 9px; 
    height: 11px; 
    display: block; 
    position: absolute; 
    text-align: center; 
} 
.nav-dots .nav-dot { 
    top: -5px; 
    width: 11px; 
    height: 11px; 
    margin: 0 4px; 
    position: relative; 
    border-radius: 100%; 
    display: inline-block; 
    background-color: rgba(0, 0, 0, 0.6); 
} 
.nav-dots .nav-dot:hover { 
    cursor: pointer; 
    background-color: rgba(0, 0, 0, 0.8); 
} 
input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { 
    background: rgba(0, 0, 0, 0.8); 
}