Javascript 如何将项目符号导航添加到滑块

我已经创建了一个简单的淡入淡出滑块，并使其工作。 我想动态地将项目符号导航圈合并到滑块中，并动态地链接到幻灯片中的图像，但我发现这太难了。 现在，我已经手动输入了bullet导航圈

有人能帮我吗？ 谢谢

这是我的小提琴

HTML

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

sliderInt=1//加载时滑块默认值
sliderNext=2//下一张图片
$（文档）.ready（函数（）{
$（'.quickslider>img#1'）.fadeIn（300）；//最初加载时加载第一个滑块
$（'.nav thumbs a:first'）.addClass（'active'）；//将active类添加到第一个点
startSlider（）；
$（'.left'）。单击（函数（）{
prev（）；
$（'.nav thumbs a'）.removeClass（'active'）；
});
$（'.right'）。单击（函数（）{
next（）；
$（'.nav thumbs a'）.removeClass（'active'）；
});
});
函数startSlider（）{
count=$（'.quickslider>img'）.size（）；//用于计算所有列表项或img的变量
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；//设置为幻灯片列表完成后开始
sliderInt=1；//将整数也设置回1
}
$（'.quickslider>img'）.fadeOut（300）；//淡出所有图像
$（'.quickslider>img#'+slidenxt）.fadeIn（300）；//使用slidenxt计算下一个滑块id
sliderInt=sliderNext；//更新，使当前幻灯片为全局设置的2
sliderNext=sliderNext+1；//计算下一个图像
}，3000）；//毫秒循环后
}
//前功能
函数prev（）{
//计算当前幻灯片之前的幻灯片
newSlide=slident-1；//将当前幻灯片减去1添加到名为newSlide的变量中
showSlide（newSlide）；//将上述newSlide中的信息传递给函数showSlide
}
函数next（）{
//计算当前幻灯片之后的幻灯片
newSlide=slident+1；//当前幻灯片加1添加到名为newSlide的变量中
showSlide（newSlide）；//将上述newSlide中的信息传递给函数showSlide
}
函数stopLoop（）{
window.clearInterval（loop）；//清除循环的间隔，以便在间隔之间（即即将完成的300毫秒）时不会跳过图像，单击“下一步”将使您看起来好像已单击了两个图像
}
函数showsiled（id）{//id是我们将调用的变量名，它将被传递
stopLoop（）；//调用前面声明的函数，以便清除并重新启动间隔
如果（id>计数）{
id=1；//如果id=大于图像计数，则设置回1
}else if（id<1）{
id=count；//如果id=小于列表的计数，则设置回4或任意数量的图像
}
$（'.quickslider>img'）.fadeOut（300）；//淡出所有图像
$（'.quickslider>img#'+id）.fadeIn（300）；//使用slidenxt计算下一个滑块id
$（'.nav thumbs>a#'+id）.addClass（'active'）；
sliderInt=id；//更新以使当前幻灯片=2作为全局设置
sliderNext=id+1；//计算下一个图像
startSlider（）；//再次启动滑块进程，就像之前停止的一样
}
$（'.quickslider>img'）。悬停（函数（）{
stopLoop（）；//将图像悬停在上方时停止循环
},
函数（）{
startSlider（）；//从循环停止的地方开始
});

---

我刚刚在

nav thumb

中的链接中添加了一个数据属性。单击它们时，将读取此值，幻灯片将显示图像。

如何通过单击“下一步”和“上一步”来更改项目符号导航的状态？我将在

showsiled

功能中执行此操作。获取

a

，其中

数据幻灯片

属性与

id

相同。从所有

a

元素中删除活动类，并将其添加到我前面提到的元素中。

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

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