Javascript 如何实现带点的自定义滑块

哎,

我有一个工作与下一个和上一个按钮简单的滑块

我在尝试什么：

• 我实现的是幻灯片总数=按钮，而不是下一个和上一个按钮

JS:

$(function(){
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');
    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    $('a.control_prev').click(function (){moveLeft();});
    $('a.control_next').click(function (){moveRight();});   
});

例如： 请尝试以下代码：-

$('<div class="pager"></div>').appendTo('#slider ')
for(i=0;i<slideCount ;i++){
$('.pager').append('<span></span>')
}
$('.pager span:nth-child(1)').addClass('active');

$('.pager span').click(function(){
var eq = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.slider ul').animate({left:'-' + slideWidth *eq},500)
})

$（“”）.appendTo（“#滑块”）
对于（i=0；i

*{边距：0；填充：0；框大小：边框框；}
.slider{宽度：320px；溢出：隐藏；边距：50px 0 50px；最大宽度：100%；}
.slider ul{float:left；}
.slider li{float:左；列表样式：无；}
.pager{float:左；边距：5px；}
.pager跨距{宽度：15px；高度：15px；背景：#000；边框半径：50%；显示：内联块；边距：0 5px；光标：指针；颜色：#fff；}
.pager span.active{背景色：#f00；}








$（文档）.ready（函数（）{
var slider_w=$（'.slider'）.width（）；
var total_li=$（'.slider li'）。长度
var total_w=$（'.slider'）.width（）*total_li
$（'.ul'）。宽度（总宽度）
var计数=1；
//下一个按钮
$（'a.next'）。单击（函数（）{
计数++
如果（计数0）{
$（'.slider ul'）。动画（{marginLeft:'+='+slider_w}，500）
}
否则{
计数=总数
$（'.slider ul'）.animate（{marginLeft:-total_w+slider_w}，500）
}
$（'.pager span:n个子（'+count+'））.addClass（'active'）.sides（）.removeClass（'active'）；
返回错误
})
///传呼机
$（“”）.appendTo（“.slider”）
对于（i=0；iMy friend）您没有根据您的设计更改css，请将#slider li width设置为等于#slider的宽度。。。
  <style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  .slider { width: 320px; overflow: hidden; margin: 50px 0 0 50px; max-width: 100%; }
  .slider ul { float: left; }
  .slider li { float: left; list-style: none; }
  .pager { float: left; margin: 5px; }
  .pager span { width: 15px; height: 15px; background: #000; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; color: #fff; }
  .pager span.active { background-color: #f00; }
  </style>


<div class="slider">
<ul>
<li title="First"><img src="story1.jpg" alt=""></li>
<li title="Second"><img src="story2.jpg" alt=""></li>
<li title="Last"><img src="story3.jpg" alt=""></li>
<li title="First"><img src="story1.jpg" alt=""></li>
<li title="Second"><img src="story2.jpg" alt=""></li>
<li title="Last"><img src="story3.jpg" alt=""></li>
</ul>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>

  <script>
  $(document).ready(function() {

  var slider_w = $('.slider').width();
  var total_li = $('.slider li').length
  var total_w = $('.slider').width()*total_li
  $('.slider ul').width(total_w)
  var count = 1;


  // next button
  $('a.next').click(function(){
  count++
  if(count <= total_li){
  $('.slider ul').animate({marginLeft: '-=' + slider_w},500)
  }
  else{
  count = 1
  $('.slider ul').animate({marginLeft:0},500)
  }

  $('.pager span:nth-child('+ count +')').addClass('active').siblings().removeClass('active');

  return false
  }) 

  //prev button
  $('a.prev').click(function(){
  count--
  if(count > 0 ){
  $('.slider ul').animate({marginLeft: '+=' + slider_w},500)
  }
  else{
  count = total_li
  $('.slider ul').animate({marginLeft:-total_w + slider_w },500)
  }

  $('.pager span:nth-child('+ count +')').addClass('active').siblings().removeClass('active');
  return false
  })

  /// pager
  $('<div class="pager"></div>').appendTo('.slider')
  for(i=0;i<total_li;i++){
  $('.pager').append('<span></span>')
  }
  $('.pager span:nth-child(1)').addClass('active');

  $('.pager span').click(function(){

  var eq = $(this).index();
  $('.slider ul').animate({marginLeft:'-' + slider_w*eq},500)

  count=eq + 1

  $(this).addClass('active').siblings().removeClass('active');


  })

  });


  </script>