Продвинутый javascript image slider

Question

Я уже давно искал время и понял, что мне нужна помощь.

Я развиваю что-то для своего друга на PHP, но ему очень сложно программировать (мне) слайдер изображения на его веб-сайте. Я голландский, и пример, который я покажу вам, относится к голландскому веб-сайту: http://www.iboma.com/index.asp. Я пытаюсь сделать подобную анимацию, но в javascript/jQuery.

Только вместо показанного образца древесины мне нужно затухать в изображении и соответствующей ссылке. Текст может быть дополнительным. Это не нужно.

Стандартные слайдеры не достаточно хороши, поэтому мне нужен специальный код. Никаких фантастических анимаций, кроссфейда не было бы идеальным. После того, как изображение исчезло, мне нужно, чтобы изображение + ссылка исчезла при наложении фонового изображения, а также при сохранении наложенного логотипа, также показанного на веб-сайте примера.

Я хотел бы подать изображения слайдера изображения с PHP либо с помощью массива JSON, либо предварительно загруженного на веб-сайт (возможно, более дружественный поисковой системе).

var photos = [ { image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.stackoverflow.com/" }, 
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.google.com/" }, 
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.yahoo.com/" }]; 

Не могли бы вы, ребята, помочь мне на моем пути разработать такую ​​анимацию?

Начиная от:

Я пытаюсь выяснить, как иметь эффективный цикл infinte штабелирования различных событий, которые я должен вызвать, чтобы оживить вещи.

Во-первых, я использую обычный javascript или мне лучше использовать jQuery относительно загрузки и скорости?

Во-вторых, что такое хорошая реализация такого кода для бесконечного цикла?

В-третьих, как я могу инициировать различные события друг за другом, не прерывая поток анимации.

В-четвертых, во время анимации изменение фонового изображения, как я могу убедиться, что оверлейный логотип не исчезнет за анимацией? Это одна из моих главных проблем. Использование fadeIn и fadeOut логотип исчезает за моими изображениями.

Предложения?

Answer 1

Наконец-то получил то, что мне нужно.

Sófka, вы помогли мне на моем пути. Thx для этого. Это то, что мне нужно. О, и я использовал для этого слайдер изображения на орбите.

Следующий код работает для меня:

(function($) { 
     $(document).ready(function() { 
      $('#featured').orbit({ 
       animation: 'fade',     // fade, horizontal-slide, vertical-slide, horizontal-push 
       animationSpeed: 500,    // how fast animtions are 
       timer: true,      // true or false to have the timer 
       advanceSpeed: 6000,     // if timer is enabled, time between transitions 
       pauseOnHover: true,     // if you hover pauses the slider 
       startClockOnMouseOut: true,   // if clock should start on MouseOut 
       startClockOnMouseOutAfter: 0,  // how long after MouseOut should the timer start again 
       directionalNav: false,    // manual advancing directional navs 
       captions: false,     // do you want captions? 
       captionAnimation: 'fade',   // fade, slideOpen, none 
       captionAnimationSpeed: 800,   // if so how quickly should they animate in 
       bullets: false,      // true or false to activate the bullet navigation 
       bulletThumbs: false,    // thumbnails for the bullets 
       bulletThumbLocation: '',   // location from this file where thumbs will be 
       beforeSlideChange: function() { 
        $('#featured a, #featured span').fadeOut(400, function() { 
         $('#featured a, #featured span').remove(); 
        }); 

        $('#featured img').each(function(index) { 
         if ($('#featured img').eq(index).css("z-index") == 3) { 
          var className = $('#featured img').eq(index).attr("class"); 
          $('#featured img') 
           .eq($('#featured img').index(this)) 
           .after($('#featured-images .' + className) 
            .clone() 
            .css("z-index","4") 
           ); 
          $('#featured a.' + className) 
           .css("top",$("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 50) 
           .css("left",$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 50) 
           .fadeIn(1000, function() { 
            $('#featured a.' + className + ' img').fadeIn(1500); 
            $('#featured img') 
             .eq($('#featured img').index(this)) 
             .after($('#featured-text .' + className) 
              .clone() 
              .css({"z-index":"4", 
              "top":"0px", 
              "display":"block", 
              "opacity":0, 
              "position":"absolute", 
              "left":$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 70 - $('#featured-text .' + className).width()}) 
             ); 
            $('#featured span.' + className).animate({ 
             opacity: 1, 
             top: $("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 25 
            }, 1000); 
           }); 

         } 
        }); 
       } 
      }); 
     }); 
    }(jQuery)); 

Необходимо, чтобы добавить некоторые крючки событий в коде libary себя, но это было не слишком трудно.

HTML:

<div id="featured"> 
       <img src="http://localhost/foo/images/bar.png" class="image-1" width="924" height="317" alt="" /> 
       <img src="http://img265.imageshack.us/img265/3355/62320763.jpg" class="image-2" width="924" height="317" alt="" /> 
       <img src="http://img411.imageshack.us/img411/1237/75707805.jpg" class="image-3" width="924" height="317" alt="" /> 
      </div> 
      <div id="featured-images"> 
       <a href="" class="image-1" style="width:100px;height:50px;border:1px solid #FFF;"><img src="http://localhost/foo/images/foobar.png" width="100" height="50" alt="" style="display:none" /></a> 
      </div> 
      <div id="featured-text"> 
       <span class="image-1" style="display:none;font-size:30px;color:#FFF;">Dit is een test</span> 
      </div> 

Answer 2

Я уже давно искал поисковые запросы, и я начинаю понимать, что мне нужна помощь. действительно нужна помощь.

Вышеприведенная линия для меня не имеет смысла.

Я набрал «слайдер изображения» в Google, и вот первый результат.

http://nivo.dev7studios.com/

который выглядит очень похоже на то, что вы просите.

Существует бесплатный код слайдера изображения, который содержит ссылки, тексты, почти все, что вам нужно.

Answer 3

ОК, насколько вы уже знаете, что никто не будет писать для вас;) Я могу порекомендовать вам слайд-шоу, которое будет просто в состоянии сделать это - http://jquery.malsup.com/cycle/

$('#slideshow').cycle({ 
    fx: 'fade', 
    after: onAfter 
}); 

function onAfter(curr, next, opts, fwd) { 
    //here you make animation with text and small image 
}; 

Это так просто, что все вам нужно сделать, это весело со всеми анимациями. Попробуй. Нет необходимости писать свой собственный код слайд-шоу для этого, что вам нужно.