CODEWITHSUNDEEP
javascripthtml
Frank Lee
Frank Lee

Reputation: 171

cannot make autoslider() to function when i am make a slider using pure javascript?

HTML:

<div class="sliderImage">
  <img src="icon-facebook.png" name="slidershow" />
</div>

<table>
    <tr>
        <td align="left">
            <a href="" class="sliderPrevious">Previous</a>
        </td>

        <td align="right">
            <a href="" class="sliderNext">Next</a>
        </td>       
    </tr>
</table>

<div id="description">
</div>

JavaScript:

<script type="text/javascript">
(function(){
    var Image = new Array('icon-facebook.png','icon-google.png','icon-mail.png','icon-twitter.png');
    var Description = new Array('This is an facebook icon','This is an google icon','This is an mail icon','This is an twitter icon');

    var sliderPrevious = document.getElementsByClassName('sliderPrevious')[0];
    var sliderNext = document.getElementsByClassName('sliderNext')[0];
    var sliderAuto = document.getElementsByClassName('sliderAuto')[0];
    var myAutoSlider;

    var Image_Number = 0;
    var Image_Length = Image.length - 1;

    function change_image(num){
          Image_Number = Image_Number + num;

          if(Image_Number > Image_Length){
              Image_Number = 0;
          }

          if(Image_Number < 0){
            Image_Number = Image_Length;

          }

          document.slidershow.src = Image[Image_Number];
          document.getElementById('description').innerHTML = Description[Image_Number];

          return false;
    };

    function autoSlider(){

        myAutoSlider = setInterval(change_image(1), 1000);
    };

    function myEventLisener(target, event, myNumber){
              target.addEventListener(event, function(e){
                         e.preventDefault();
                         change_image(myNumber);

                         clearInterval(myAutoSlider);//if click ,then stop autoplay
              });          
    };
    autoSlider();
    myEventLisener(sliderPrevious,'click', -1);
    myEventLisener(sliderNext,'click', 1);
}());
</script>

I wrote the above code to make a slider using pure js. Using the above code I can use the next and preview buttons, but I can't make it play automatically, which the autoSlider() function is set for.

I tried the inspector, but no problem was shown. Everything is OK, but the autoSlider() can't function.

Upvotes: 2

Views: 56

Answers (1)

Andr&#233; Roggeri Campos
Andr&#233; Roggeri Campos

Reputation: 2766

The setInterval function must receive a callback, but you're passing a function call. So it gets executed only once.

You must change your setIntervalimplementantion to:

function autoSlider(){
    myAutoSlider = setInterval(function(){change_image(1)}, 1000);
};

Working fiddle

Upvotes: 1

Related Questions