Question

嘿，

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

我尝试的是什么：

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

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

示例： enter image description here

Answer 1

试试这段代码： -

$('<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)
})

我已经使用了当前点的活动类，因此在你的css中使用.active ...

Answer 2

  <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>

如何使用点

2 个答案: