CODEWITHSUNDEEP
jqueryhtml
Cristi
Cristi

Reputation: 25

How can I make these images scroll automatically?

I have this example:

https://jsfiddle.net/4zuzxdxf/

This is code HTML:

    <div id="#slide">
    <div class="img1"> <img src="http://www.avatarsdb.com/avatars/super_mario_panic.gif" /><p>pic1</p></div>
    <div class="img1"> <img src="http://www.smwiki.net/images/d/d1/53338_SB4_C_mario_yoshi_01_ad-100x100.jpg
" /><p>pic2</p></div>
    <div class="img1"> <img src="http://www.avatarsdb.com/avatars/super_mario_smile.jpg" /><p>pic3</p></div>

</div>

This is code JS:

var CurrentImage=$('#slide .img1:first').index();
alert(CurrentImage);
var LastImage=$('#slide .img1:last').index();
alert(LastImage);
var NextImage=CurrentImage+1;

$('.img1').hide();

This code is incomplete, I am a beginner and want to know how can I make images scroll automatically.

Above is an example of code as I tried to make it.

I hide pictures but do not know how to rewind them automatically? To call a particular function?

Thanks in advance!

Upvotes: 0

Views: 48

Answers (2)

Mo Alsaedi
Mo Alsaedi

Reputation: 707

Since you mentioned you were a beginner, are you doing this for the purpose of learning, or would you be interested in using a jQuery library that will do the job for you? In case you do, consider using jQuery cycle:

First, include jQuery (which I assume you have because you're using $), and the cycle script in your HTML

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>

Then, somewhere after that, you need to call the cycle script on your slider div:

<script type="text/javascript">
 $(document).ready(function(){
   $("#photos").cycle();
});
</script>

Of course, if you'd like to have a specific scrolling effect, look at the website for the plugin and read the tutorial, you will find many different options.

Upvotes: 0

Fatkhan Fauzi
Fatkhan Fauzi

Reputation: 362

i have updated your fiddle, you can try this now https://jsfiddle.net/4zuzxdxf/3/

<div id="slide">
    <div> <img src="http://www.avatarsdb.com/avatars/super_mario_panic.gif" /><p>pic1</p></div>
    <div> <img src="http://www.smwiki.net/images/d/d1/53338_SB4_C_mario_yoshi_01_ad-100x100.jpg
" /><p>pic2</p></div>
    <div> <img src="http://www.avatarsdb.com/avatars/super_mario_smile.jpg"/><p>pic3</p></div>   
</div>

for the js files

setInterval(function() { 
  $('#slide > div:first')
    .fadeIn(1000)
    .appendTo('#slide');
},  3000);

Upvotes: 1

Related Questions