JS滑块计数器不工作...需要找到一种方法使其工作正常

时间:2013-11-19 18:09:48

标签: javascript jquery html css slider

我需要一些帮助才能让这个滑块计数器正常工作,我目前正在使用sudoslider但似乎无法让它按照我想要的方式工作,任何人都可以尝试使用滑块文档,但不能正常工作......需要修改它的数字,因为幻灯片继续像1 / 2..2 / 2某样'那样......?

          html code:

          <div id="slider">
                <ul>
      <li><img src="images/1.png" alt="img"></li>
      <li><img src="images/2.png" alt="img"></li>
      <li><img src="images/3.png" alt="img"></li>
                </ul>
      </div>
    <div class="siteBtn">
    <a href="#">
    Visit Us
    </a>
    </div>
    <div class="sliderBtn">
        <a href="#" class="customLink" rel="prev"><img src="images/prevBtn.png" alt="img"></a>
    <a href="#" class="customLink" rel="next"><img src="images/nextBtn.png" alt="img"></a>
    </div>
    <div class="descrip-text"><p id="anistate"  ></p>
        <span>Slide:</span>
        <span id="slidenumber"></span> 
        <span>/5</span> 
    </div> 


    JS code:
    $(document).ready(function(){   
    var sudoSlider = $("#slider").sudoSlider({
       customLink:'a.customLink',
       prevNext:false,
       controlsFade:false
       // customlink:true
    });
});


      $(document).ready(function(){
            var sudoSlider = $("#slider").sudoSlider({
               numeric: true,
              beforeAnimation: function(slide){
                 $('div.descrip-text #anistate').text(slide).show(600);
          },
          afterAnimation: function(slide){
             $('div.descrip-text #anistate').hide(400);
             $('div.descrip-text #slidenumber').text(slide);
             var text = $(this).children().attr('src');
             $('div.descrip-text #slidehtml').text(text);
          },
          initCallback: function() {
             var slide = this.getValue("currentSlide");
             $('div.descrip-text #slidenumber').text(slide);

             var text = this.getSlide(slide).children().attr('src');
             $('div.descrip-text #slidehtml').text(text);
          }
       });
    });

1 个答案:

答案 0 :(得分:3)

我不确定这是否是你想要达到的目的,但请检查这个小提琴: http://jsfiddle.net/3NVhR/1/

$(document).ready(function () {
    var sudoSlider = $("#slider").sudoSlider({
        customLink: 'a.customLink',
        prevNext: false,
        controlsFade: false,
        auto: true,
        afterAnimation: function (slide) {
            var slide = sudoSlider.getValue("currentSlide");
            $('div.descrip-text #slidenumber').text(slide);
        },
        initCallback: function() {
            var slides = sudoSlider.getValue('totalSlides');
            $('div.descrip-text #slidenumber').next('span').text("/ " + slides);
        }
    });
});