Javascript 带可点击编号位置的JQuery幻灯片

好的，我有一些问题，我正在制作我自己的Jquery幻灯片，包括播放、暂停、下一步和上一步按钮。我想让我的幻灯片与编号图像当前的数字，并点击，使图像在数字4，但我想去数字2与点击数字。 我在谷歌和这个网站上搜索，但很难找到，因为使用Jquery插件有很多参考，但我正在学习Jquery，所以我不使用插件

他们是否必须使用数组对图像进行排序，并且他们有编号列表

这是我的代码。 HTML:

Jquery：

var timeoutId;
var slideImage = function( step ) {
    if ( step == undefined ) step = 1;
    //Clear timeout if any
    clearTimeout ( timeoutId );
    //Get current image's index
    var indx = $('.item:visible').index('.item');
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadeout this item
       $('.item:visible').fadeOut();
    }
    //Increment for next item
    indx = indx + step ;
    //Check bounds for next item
    if ( indx >= $('.item').length ) {
        indx = 0;
    } else if ( indx < 0 ) {
        indx = $('.item').length - 1;
    }
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadein next item
       $('.item:eq(' + indx + ')').fadeIn();
    }
    //Set Itmeout
    timeoutId = setTimeout ( slideImage, 5000 );
};
//Start sliding
slideImage(0);
//When clicked on prev
$('#prev').click(function() {
    //slideImage with step = -1
    slideImage (-1);   
});
//When clicked on next
$('#next').click(function() {   
     //slideImage with step = 1
     slideImage (1);
});               
//When clicked on Pause
$('#pause').click(function() {
   //Clear timeout
   clearTimeout ( timeoutId );    
    //Hide Pause and show Play
    $(this).hide();
    $('#play').show();
});
//When clicked on Play
$('#play').click(function() {
   //Start slide image
   slideImage(0);
   //Hide Play and show Pause
   $(this).hide();
   $('#pause').show();
});
$(document).ready(function(){
   var sliderwidth = 500;
  $('#navigation li').bind('click',function() {
   $('.slider').animate({left:"-" + sliderwidth * $(this).index() },1000);
  });
});

var timeoutId；
var slideImage=函数（步骤）{
如果（步骤==未定义）步骤=1；
//清除超时（如果有）
clearTimeout（timeoutId）；
//获取当前图像的索引
var indx=$（'.item:visible'）。索引（'.item'）；
//如果step==0，我们不需要在淡出中进行任何淡出
如果（步骤！=0）{
//淡出此项
$（'.item:visible'）.fadeOut（）；
}
//下一项的增量
indx=indx+阶跃；
//检查下一项的边界
如果（indx>=$（'.item'）.length）{
indx=0；
}else if（indx<0）{
indx=$（'.item'）。长度-1；
}
//如果step==0，我们不需要在淡出中进行任何淡出
如果（步骤！=0）{
//下一项
$（'.item:eq（'+indx+'））.fadeIn（）；
}
//把它放出来
timeoutId=setTimeout（slideImage，5000）；
};
//开始滑行
slidemage（0）；
//单击上一页时
$（'#prev'）。单击（函数（）{
//步骤为-1的slideImage
滑动图像（-1）；
});
//单击“下一步”时
$（“#下一步”）。单击（函数（）{
//步骤为1的slideImage
幻灯片（1）；
});               
//单击“暂停”时
$（“#暂停”）。单击（函数（）{
//清除超时
clearTimeout（timeoutId）；
//隐藏暂停并显示播放
$（this.hide（）；
$（'#play'）.show（）；
});
//当点击播放时
$（“#播放”）。单击（函数（）{
//启动幻灯片图像
slidemage（0）；
//隐藏播放并显示暂停
$（this.hide（）；
$（“#暂停”）.show（）；
});
$（文档）.ready（函数（）{
var滑块宽度=500；
$（“#导航li”）.bind（'click'，function（）{
$（'.slider'）.animate（{left:“-”+sliderwidth*$（this.index（）}，1000）；
});
});

我添加了

• 每张照片都有一个ID
• 当前显示图像的全局变量
• 单击链接时将调用的函数，该函数将调用您的函数slideImage

JSFiddle：

//用于存储超时id
var timeoutId，
电流=1；
var slideImage=函数（步骤）{
如果（步骤==未定义）步骤=1；
//清除超时（如果有）
clearTimeout（timeoutId）；
//获取当前图像的索引
var indx=$（'.item:visible'）。索引（'.item'）；
//如果step==0，我们不需要在淡出中进行任何淡出
如果（步骤！=0）{
//淡出此项
$（'.item:visible'）.fadeOut（）；
}
//下一项的增量
indx=indx+阶跃；
//检查下一项的边界
如果（indx>=$（'.item'）.length）{
indx=0；
}else if（indx<0）{
indx=$（'.item'）。长度-1；
}
//如果step==0，我们不需要在淡出中进行任何淡出
如果（步骤！=0）{
//下一项
$（'.item:eq（'+indx+'））.fadeIn（）；
currImg=$（'.item:eq（'+indx+'））.attr（'id'）；
}
//把它放出来
timeoutId=setTimeout（slideImage，5000）；
};
//开始滑行
slidemage（0）；
//单击上一页时
$（'#prev'）。单击（函数（）{
//步骤为-1的slideImage
滑动图像（-1）；
});
//单击“下一步”时
$（“#下一步”）。单击（函数（）{
//步骤为1的slideImage
幻灯片（1）；
});
//单击“暂停”时
$（“#暂停”）。单击（函数（）{
//清除超时
clearTimeout（timeoutId）；
//隐藏暂停并显示播放
$（this.hide（）；
$（'#play'）.show（）；
});
//当点击播放时
$（“#播放”）。单击（函数（）{
//启动幻灯片图像
slidemage（0）；
//隐藏播放并显示暂停
$（this.hide（）；
$（“#暂停”）.show（）；
});
$（'a'）。单击（函数（ev）{
ev.preventDefault（）；
console.log（currImg++'|'++$（this.attr（'href'））；
slideImage（$（this.attr（'href'）-currImg）；
});
$（文档）.ready（函数（）{
var滑块宽度=500；
$（“#导航li”）.bind（'click'，function（）{
$（'.slider'）.animate（{left:“-”+sliderwidth*$（this.index（）}，1000）；
});
});
@font-face{
src:url（../font/pacifico.woff）；
字体系列：“pacifico”；
}
@字体{
src:url（../font/ptsans.woff）；
字体系列：“ptsans”；
}
* {
边距：0px；填充：0px；
}
.集装箱{
宽度：1280px；
保证金：0px自动；
背景色：#eaeaea；
字体系列：“ptsans”、“pacifico”；
}
.管理小组{
高度：30px；
线高：30px；
背景色：#22222；
颜色：#fff；
}
李先生行政小组{
显示：内联块；
左侧填充：80px；
}
.行政小组李a{
文字装饰：无；
颜色：#808080；
}
.菜单标题{
高度：147px；
}
.菜单标题李{
显示：内联块；
右边填充：25px；
线高：147px；
字体大小：粗体；
}
.菜单标题李a{
文字装饰：无；
颜色：#cc3333；
填充：10px；
}
.菜单标题li a:悬停{
边框底部：2个实心#cc3333；
}
林克尤塔马酒店{
左侧填充：110px；
}
.标志{
填充顶部：20px；
位置：绝对位置；
左：640px；
文本对齐：居中；
字体系列：“pacifico”
}
.搜索栏{
线高：147px；
}
.菜单宣传{
背景色：#cc3333；
高度：147px；
颜色：#fff；
文本阴影：0px 3px 1px#000；
填充：30px 50px 0px 50px；
位置：相对位置；
盒影：嵌入0px 3px 3px rgba（0,0,0,0.5）；
}
.菜单宣传a{
文字装饰：无；
颜色：#fff；
字体大小：14px；
}
.菜单宣传片h3{
字体系列：“pacifico”；
字体大小：48px；
}
.购买促销{
填充：30px 50px 0px 50px；
}
a、 按钮购买{
显示：块；
填充：15px 35px；
宽度：220px；
高度：25px；
背景色：#cc3333；
边框：1px实心#90282c；
边界半径：3px；
盒影：0px 3px 1px#90282c，0px 3px 1px#90
#items {
    position : relative;
    width : 400px;
    height : 200px;
    top : 20px;
    left : 20px;
}
.item {
    position : absolute;
    background-color : #eee;
    border : 1px solid #ccc;
    width : 398px;
    height : 198px;
    display :none;
    text-align : center;
    font-size : 72px;
}

.item img{
    text-align: center;
    display: block;
    max-width:398px;
    max-height: 198px;
    width: auto;
    height: auto;
    margin: auto;
}

.first{
    display : block;
}
#controls {
    margin-top : 30px;
}
li {
    display : inline-block;
    padding : 5px;
    border : 1px solid #ccc;
    background-color : #eee;
    cursor : pointer;
}
#play {
    display : none;
}

var timeoutId;
var slideImage = function( step ) {
    if ( step == undefined ) step = 1;
    //Clear timeout if any
    clearTimeout ( timeoutId );
    //Get current image's index
    var indx = $('.item:visible').index('.item');
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadeout this item
       $('.item:visible').fadeOut();
    }
    //Increment for next item
    indx = indx + step ;
    //Check bounds for next item
    if ( indx >= $('.item').length ) {
        indx = 0;
    } else if ( indx < 0 ) {
        indx = $('.item').length - 1;
    }
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadein next item
       $('.item:eq(' + indx + ')').fadeIn();
    }
    //Set Itmeout
    timeoutId = setTimeout ( slideImage, 5000 );
};
//Start sliding
slideImage(0);
//When clicked on prev
$('#prev').click(function() {
    //slideImage with step = -1
    slideImage (-1);   
});
//When clicked on next
$('#next').click(function() {   
     //slideImage with step = 1
     slideImage (1);
});               
//When clicked on Pause
$('#pause').click(function() {
   //Clear timeout
   clearTimeout ( timeoutId );    
    //Hide Pause and show Play
    $(this).hide();
    $('#play').show();
});
//When clicked on Play
$('#play').click(function() {
   //Start slide image
   slideImage(0);
   //Hide Play and show Pause
   $(this).hide();
   $('#pause').show();
});
$(document).ready(function(){
   var sliderwidth = 500;
  $('#navigation li').bind('click',function() {
   $('.slider').animate({left:"-" + sliderwidth * $(this).index() },1000);
  });
});