javascript - jQuery automatic scroll through images - Stack Overflow

admin管理员组

文章数量:1023195

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?

This is what i've tried to get them automatically scrolling:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

I've tried other aspects of this same code to try and get it to do something, but to no anvil.

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.

Thanks all

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?

This is what i've tried to get them automatically scrolling:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

I've tried other aspects of this same code to try and get it to do something, but to no anvil.

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.

Thanks all

• javascript
• jquery
• slideshow

Share Improve this question Follow asked Jul 13, 2013 at 14:58 Johnathan BrownJohnathan Brown 7131313 silver badges3636 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?

If it's the latter you can use this very simple code for doing this.

HTML:

<div class="image">        
    <img src="images/image1.png"  />
    <img src="images/image2.png"  />
    <img src="images/image3.png"  />
    <img src="images/image4.png"  />
</div>

CSS:

.image
{
    position:relative;
}

.image img
{
   position:absolute;
   top:0;
   left:0;
}

jQuery:

$(function() {

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads

    setInterval(function()
    {
        $('.image :first-child').fadeOut(1000)
            .next().fadeIn(1000).end().appendTo('.image');
    },5000);        
}

This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.

For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.

jsFiddle demo

The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.

You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.

For example: http://www.1stwebdesigner./css/fresh-jquery-image-gallery-display-solutions/

You can do this:

$('.image a').each(function (index) {
    $(this).show(1000, function () {
        $(this).delay(index * 1000).hide(1000);
    });
});

FIDDLE DEMO

If you don't want to change your structure much and still want to retain the click function, you can do something like this

This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well

HTML (changed slightly)

<div id="slideshow">
        <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia/wikipedia/mons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
     <a id='two' href="#"><img src="https://si0.twimg./profile_images/604644048/sign051.gif" width="240" height="60" /></a>  <a id='three' href="#"><img src="https://g.twimg./business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a>  <a id='four' href="#"><img src="https://si0.twimg./profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>

</div>
        <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia/wikipedia/mons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
     <a id='two' href="#"><img src="https://si0.twimg./profile_images/604644048/sign051.gif" width="525" height="110" /></a>
     <a id='three' href="#"><img src="https://g.twimg./business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
     <a id='four' href="#"><img src="https://si0.twimg./profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>

        </div>
    </div>

CSS:

.image a:not(#one) {
    display:none;
}

javascript:

$('.text a').click(function () {
    var idName = $(this).attr('id');
    $('.image a').each(function () {
        if ($(this).attr('id') === idName) $(this).show(1000);
        else {
            $(this).hide(1000);
        }
    });
    window.clearInterval(loop);
    loop = self.setInterval(function () {
        autoChangeSlide()
    }, 5000);
});

function autoChangeSlide() {
    var elem;
    $('.image a').each(function () {
        if ($(this).is(':visible')) elem = $(this);
    });
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
        elem.hide(1000).next().show(1000);
    } else {
        elem.hide(1000).parent().children('a').first().show(1000);
    }
}
var loop = self.setInterval(function () {
    autoChangeSlide()
}, 5000);

You can bine my solution with Dolchio's to make it particularly awesome

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?

This is what i've tried to get them automatically scrolling:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

I've tried other aspects of this same code to try and get it to do something, but to no anvil.

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.

Thanks all

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?

This is what i've tried to get them automatically scrolling:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

I've tried other aspects of this same code to try and get it to do something, but to no anvil.

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.

Thanks all

• javascript
• jquery
• slideshow

Share Improve this question Follow asked Jul 13, 2013 at 14:58 Johnathan BrownJohnathan Brown 7131313 silver badges3636 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?

If it's the latter you can use this very simple code for doing this.

HTML:

<div class="image">        
    <img src="images/image1.png"  />
    <img src="images/image2.png"  />
    <img src="images/image3.png"  />
    <img src="images/image4.png"  />
</div>

CSS:

.image
{
    position:relative;
}

.image img
{
   position:absolute;
   top:0;
   left:0;
}

jQuery:

$(function() {

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads

    setInterval(function()
    {
        $('.image :first-child').fadeOut(1000)
            .next().fadeIn(1000).end().appendTo('.image');
    },5000);        
}

This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.

For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.

jsFiddle demo

The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.

You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.

For example: http://www.1stwebdesigner./css/fresh-jquery-image-gallery-display-solutions/

You can do this:

$('.image a').each(function (index) {
    $(this).show(1000, function () {
        $(this).delay(index * 1000).hide(1000);
    });
});

FIDDLE DEMO

If you don't want to change your structure much and still want to retain the click function, you can do something like this

This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well

HTML (changed slightly)

<div id="slideshow">
        <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia/wikipedia/mons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
     <a id='two' href="#"><img src="https://si0.twimg./profile_images/604644048/sign051.gif" width="240" height="60" /></a>  <a id='three' href="#"><img src="https://g.twimg./business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a>  <a id='four' href="#"><img src="https://si0.twimg./profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>

</div>
        <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia/wikipedia/mons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
     <a id='two' href="#"><img src="https://si0.twimg./profile_images/604644048/sign051.gif" width="525" height="110" /></a>
     <a id='three' href="#"><img src="https://g.twimg./business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
     <a id='four' href="#"><img src="https://si0.twimg./profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>

        </div>
    </div>

CSS:

.image a:not(#one) {
    display:none;
}

javascript:

$('.text a').click(function () {
    var idName = $(this).attr('id');
    $('.image a').each(function () {
        if ($(this).attr('id') === idName) $(this).show(1000);
        else {
            $(this).hide(1000);
        }
    });
    window.clearInterval(loop);
    loop = self.setInterval(function () {
        autoChangeSlide()
    }, 5000);
});

function autoChangeSlide() {
    var elem;
    $('.image a').each(function () {
        if ($(this).is(':visible')) elem = $(this);
    });
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
        elem.hide(1000).next().show(1000);
    } else {
        elem.hide(1000).parent().children('a').first().show(1000);
    }
}
var loop = self.setInterval(function () {
    autoChangeSlide()
}, 5000);

You can bine my solution with Dolchio's to make it particularly awesome

本文标签： javascriptjQuery automatic scroll through imagesStack Overflow