简体   繁体   English

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

[英]JS slider counter not working…need to find a way to make it work as it should

i need some help to make this slider counter work, am currently using sudoslider but can't seem to make it work as i want, can anyone help tryed from slider docs but doesn't work as it should...needs to modify it's number as slides go on like 1/2..2/2 somethn' like that...? 我需要一些帮助来使此滑块计数器正常工作,目前正在使用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);
          }
       });
    });

I'm not sure if this is what you wanted to achieve but check this fiddle: http://jsfiddle.net/3NVhR/1/ 我不确定这是否是您想要实现的,但是请检查以下小提琴: 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);
        }
    });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM