Javascript Jquery div滑块+菜单

目前，我需要为一个项目制作一个滑块。但是由于大多数插件的大小，我正在尝试创建自己的jquery脚本，因为我只需要基本的东西。但老实说，我是jQuery的初学者，需要一些帮助

当时我得到了一个as容器溢出：隐藏，250px宽，在这一点上，我得到了另一个，它需要从右向左移动，2500px宽。我希望$document.ready函数上的div以250px的步长向左移动，间隔5秒。但是在花了一上午的时间想知道从哪里开始后，我还是被卡住了

此外，我希望有以下选择：

在内部完全向左后，它会淡出原来的位置。 创建点以导航到特定位置的方法，当导航到该位置时，幻灯片将从该位置开始设置动画。

---

我知道这是个大难题？问题，但即使是一点点帮助也会非常感激。

用正确的程序更新了您的JSFIDLE

---

用正确的程序更新了JSFIDLE

---

下面是我创建的一个符合您要求的演示：。jQuery/JavaScript被完整地注释以供参考，但是如果任何部分需要额外的细化，我很乐意解释更多

这是我创建的一个符合您要求的演示：。jQuery/JavaScript被完整地注释以供参考，但是如果任何部分需要额外的细化，我很乐意解释更多

HTML:

jQuery：

希望我评论的代码不错，如果有问题可以问一下

HTML:

jQuery：

---

希望我对代码的评论很好，如果您有问题，请询问

到目前为止您做了什么？我把它放在jsfiddle里。1秒：。我现在得到了这个，但这里是我被卡住的地方。你能参考这个链接吗[1]：到目前为止你做了什么？我把它放在jsfiddle里。1秒：。我现在得到了这个，但这里是我被卡住的地方。你能参考这个链接吗[1]：很酷，谢谢你，我现在得到了这个：，我对@Abody97答案的异教部分很好奇，但是你帮了我很多！。谢谢你，我现在明白了：，我对@Abody97答案中的异教部分很好奇，但是你帮了我很多！。我现在得到了这个：在@Kapil Sharma的帮助下，但我对你的分页部分很好奇。。我不完全理解。你能再进一步解释一下吗？@Augus我更新了演示，添加了更多的注释+最后添加了一段注释，解释了我们是如何得到左公式的。如果您需要更多详细信息，请告诉我！：我从你身上学到了很多，非常感谢。但最后我尝试了@roko的答案，效果很好。我现在得到了这个答案：在@Kapil Sharma的帮助下，但我对你的分页部分很好奇。。我不完全理解。你能再进一步解释一下吗？@Augus我更新了演示，添加了更多的注释+最后添加了一段注释，解释了我们是如何得到左公式的。如果您需要更多详细信息，请告诉我！：我从你身上学到了很多，非常感谢。但最后我尝试了@roko的答案，效果很好。

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

var steps = 10,  // SET DESIRED n OF STEPS
    delay = 3500,// SET DESIRED DELAY
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// generate dots
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// ANIMATIONS function
function anim(){
  c=c%steps; // reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// AUTO SLIDE function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // kick auto slide

// PAUSE slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// CLICK dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});