Question

function animateGallery() {
  $('#image1').css({'left':'0','display' : 'block'}).animate({'left': '-150px'}, 8500,function(){
  $(this).fadeOut('slow',function(){
   $('#image2').css({'right':'0','display' : 'block'}).animate({'right':'-150px'},8500, function() {
    $(this).fadeOut('slow',function(){
     $('#image3').css({'left':'0','display' : 'block'}).animate({'left':'-150px'},8500, function() {
     $(this).fadeOut('slow',function(){
      $('#image4').css({'right':'0','display' : 'block'}).animate({'right':'-150px'},8500, function() {
       $(this).fadeOut('slow',function(){
       $('#image5').css({'left':'0','display' : 'block'}).animate({'left':'-150px'},8500, function() {
        $(this).fadeOut('slow',function(){
         $('#image6').css({'right':'0','display' : 'block'}).animate({'right':'-150px'},8500, function() {
         $(this).fadeOut('slow',function(){
           $('#image7').css({'left':'0','display' : 'block'}).animate({'left':'-150px'},8500, function() {
           $(this).fadeOut('slow',function(){
            animateGallery();
           });
          });
         });
         });
        });
       });
       });
      });
     });
     });
    });
   });
  })
  });
 }
 animateGallery();

HTML

<div id="gallery">
    <img id="image1" src="imge.jpg"/>
    <img id="image2" src="imge.jpg"/>
    <img id="image3" src="imge.jpg"/>
    <img id="image4" src="imge.jpg"/>
    <img id="image5" src="imge.jpg"/>
    <img id="image6" src="imge.jpg"/>
    <img id="image7" src="imge.jpg"/>
</div>

http://www.imperialpalace-cebu.com 我想用JQUERY模仿那个画廊。在主页。

我想显示一个图库/图片将从左到右和从右到左交替显示无限的画廊。这段代码已经有效，但我想缩短它。

Answer 1

我认为如果你使用Lightbox会更好。 http://leandrovieira.com/projects/jquery/lightbox/

Answer 2

当您重复这样的分层代码时，可以通过将项目存储在数组或列表中来大大缩短它。在您的情况下，您可以这样做：

var imageIDArray = new Array('image1', 'image2', etc...)

然后，您可以使用该数组来了解哪一个在下一行。

Answer 3

您可以将图像保存在一个数组中，然后：

var currentIndex = 0;
var imageArr = ...;// create image array
setInterval(function(){Animate_Action();}, 8500);
function Animate_Action()
{
    var imageToAnimate = imageArr[currentIndex];

    imageToAnimate.animate(...);// your animation here.

    currentIndex = currentIndex + 1;
    if(currentIndex >= imageArr.length) currentIndex = 0;
}

Answer 4

var $images = $('#gallery img');
var current_image = 0;
var duration = 8000;

function animateGallery() {

  $images[current_image].css({
    'left': '0',
    'display': 'block'
  }).animate({
      'left': '-150px'
  }, duration, function(){
      $(this).fadeOut('slow', function() {

          current_image += 1;

          if (current_image > $images.length - 1) {
             current_image = 0;
          }

          animateGallery();

      });    
  });
}


 animateGallery();

缩短Gallery的Jquery代码

4 个答案: