슬라이더에 글 머리 기호 탐색을 추가하는 방법

Question

간단한 페이드 슬라이더를 만들고 작동 시켰습니다. 글 머리 기호 탐색 동그라미를 동적으로 슬라이더에 통합하고 슬라이드에있는 이미지에 동적으로 링크하고 싶지만 너무 어렵습니다. 지금은 수동으로 글 머리 기호 탐색 동그라미를 넣었습니다

누군가 나를 도와 줄 수 있습니까? 감사합니다는

여기 내 바이올린의 http://jsfiddle.net/kingkhan/f5zBy/60/

HTML

<div id="quickslider"> 
<div class="quickslider"> 
    <img id="1" src="http://placehold.it/990x400/c84265/ffffff&text=one" alt="placeholder image"> 
    <img id="2" src="http://placehold.it/990x400/000000/ffffff&text=two" alt="placeholder image"> 
    <img id="3" src="http://placehold.it/990x400/636363/ffffff&text=three" alt="placeholder image"> 
    <img id="4" src="http://placehold.it/990x400/CCCCCC/ffffff&text=four" alt="placeholder image"> 
</div><!--quickslider--> 

<div class="nav-thumbs"> 
    <ul> 
     <li><a href="#" class="1">1</a></li> 
     <li><a href="#" class="2">2</a></li> 
     <li><a href="#" class="3">3</a></li> 
     <li><a href="#" class="4">4</a></li> 
    </ul> 
</div> 

<div class="quickslider-nav"> 
    <a href="#" class="left">Prev</a> 
    <a href="#" class="right" onclick="next(); return false;">Next</a> 
</div> 
     </div><!--quickslider--> 

CSS

#quickslider{width:990px; margin:0 auto; position: relative;} 
.quickslider{position: relative; float: left; display: block; width: 990px; height:400px;} 
.quickslider img{display: none; margin: 0; padding: 0; position: absolute;} 

.nav-thumbs{position: absolute; clear:both; bottom:15px; left:42%;} 
.nav-thumbs ul{list-style-type: none;} 
.nav-thumbs ul li{float:left; margin-top:20px;} 
.nav-thumbs ul li a{ 
display:block; 
width:10px; 
height:10px; 
float: left; 
margin:0 5px; 
background-color: #fff; 
text-indent: -9999px; 
border-radius: 10px; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
} 
.nav-thumbs ul li a:hover, .nav-thumbs ul li a.active{background-color: #a89d8a !important;} 
.active{background-color: #a89d8a !important;} 

.quickslider-nav{position:relative; clear:both; color:#000;} 
.quickslider-nav a{text-decoration: none;} 
.quickslider-nav .left{float: left; background-color: #fff; padding:5px 10px;} 
.quickslider-nav .right{float: right; background-color: #fff; padding:5px 10px;} 
.quickslider-nav .left:hover, .quickslider-nav .right:hover{background-color: #000; color:#fff;} 

jQuery를 1.9.1

sliderInt = 1; //slider default on load 
sliderNext = 2; //next image in order 

$(document).ready(function(){ 

$('.quickslider > img#1').fadeIn(300); // initially load first slider on load 
$('.nav-thumbs a:first').addClass('active'); // add active class to first dot 
startSlider(); 
$('.left').click(function(){ 
    prev(); 
    $('.nav-thumbs a').removeClass('active'); 
}); 
$('.right').click(function(){ 
    next(); 
    $('.nav-thumbs a').removeClass('active'); 
}); 

}); 

function startSlider(){ 
count = $('.quickslider > img').size(); //variable to count all the list items or img 
loop = setInterval(function(){ 

    if(sliderNext>count){ 
     sliderNext = 1; // set to beginning after completion of slides list 
     sliderInt = 1; // set the Integer number back to 1 also 
    } 

    $('.quickslider > img').fadeOut(300); // fadeout all images 
    $('.quickslider > img#'+sliderNext).fadeIn(300); // use sliderNext to calculate the next slider id 
    sliderInt = sliderNext; // update so that the current slide = 2 as set globally 
    sliderNext = sliderNext + 1; // calculate the next image 

}, 3000); // after milliseconds loop 
} 

//previous function 
function prev(){ 
//calculate the slide which comes before the current slide 
newSlide = sliderInt - 1; // current slide minus 1 added to variable called newSlide 
showSlide(newSlide); // pass information from newSlide above to function showSlide 

} 

function next(){ 
//calculate the slide which comes after the current slide 
newSlide = sliderInt + 1; // current slide plus 1 added to variable called newSlide 
showSlide(newSlide); // pass information from newSlide above to function showSlide 
} 

function stopLoop(){ 
window.clearInterval(loop); //clear interval of loop so that it does not skip images when in between intervals, ie. the 300 miliseconds just about to complete, and clicking on next will make it seem as though the you have clicked through two images 

} 

function showSlide(id){ // id is the variable name of what we will be calling which will be passed 
stopLoop(); // call function that we have declared above so that the interval is cleared and restarted 

    if(id > count){ 
     id = 1; // if id = more than the count of images then set back to 1 
    }else if(id < 1){ 
     id = count; // if id = less than count of list then set back to 4 or whatever number of images 
    } 

    $('.quickslider > img').fadeOut(300); // fadeout all images 
    $('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id 

    $('.nav-thumbs > a#'+id).addClass('active'); 

    sliderInt = id; // update so that the current slide = 2 as set globally 
    sliderNext = id + 1; // calculate the next image 
    startSlider(); // start the slider process again, as it was stopped before 
} 

$('.quickslider > img').hover(function(){ 
    stopLoop(); // stops the loop when image is hovered over 
}, 
function(){ 
startSlider(); // starts where the loop left off 
}); 

Answer 1

Updated Fiddle.

방금 ​​nav-thumb의 링크에 데이터 속성을 추가했습니다. 단추를 클릭하면이 값을 읽고 슬라이드에 이미지가 표시됩니다.