高級javascript圖像滑塊

-4

我一直在Google上搜索一下，發現我需要幫助。高級javascript圖像滑塊

我正在爲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負載和速度？其次，對於無限循環，這樣的代碼有什麼好的實現？

三，如何在不中斷動畫流程的情況下觸發各種事件。

四，動畫背景圖片變化我如何確保疊加的logo不會在動畫背後消失？這是我的主要問題之一。使用fadeIn和fadeOut標誌消失在我的圖像後面。

對此提出建議？

來源

2012-06-08 Orion

_「你們能幫助我制定這樣一個動畫？」 _不付款，所以不，這不是網站。 – gdoron

我的意思更像是：你們能幫我忙嗎？我從來沒有寫過無限循環的代碼。我發現的所有東西我都不明白。 – Orion

請定義幫助...沒有問題，所以您希望我們爲您做。我的簡單邏輯。 – gdoron

終於得到了我所需要的。

Sófka你在路上幫了我。 Thx。這是我需要的。哦，我爲此使用了Orbit圖像滑塊。

下面的代碼對我的作品：

(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>

來源

2012-06-26 16:44:51 Orion

你應該真的給sofika支票 – tcoulson

我一直在Google上搜索一段時間，現在我開始意識到我真的需要一些幫助。

上述行對我沒有意義。

我在「圖片滑塊」中輸入谷歌，這是第一個結果。

http://nivo.dev7studios.com/

它看起來非常像你的要求。

有一個圖像滑塊的免費代碼，帶有鏈接，文本，幾乎所有你需要的。

來源

2012-06-08 13:08:36

OK，只要你已經知道，沒有人會寫吧，）我可以推薦你幻燈片將簡單地能夠做到這一點 - 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 
};

它是如此簡單，所有的你必須做的，就是取笑所有的動畫。嘗試一下。無需爲此編寫自己的幻燈片代碼。

來源

2012-06-08 13:15:40

高級javascript圖像滑塊

回答

相關問題