滑塊圖像ID

我有一個小的問題，我的幻燈片圖像的小jQuery腳本。劇本本身運作得非常好，其目的是滾動圖像確實「淡化」，一個經典。滑塊圖像ID

問題是，如果我想用它在頁面上的另一個塊，那麼它不再正常工作..問題是肯定位於ID，但不能使其工作。

下面是腳本：

 
function slider() { 

    function animate_slider(){ 
     $('.slider #'+shown).animate({ 
      opacity:0 // fade out 
     },1000); 
     $('.slider #'+next_slide).animate({ 
      opacity:1.0 // fade in 
     },1000); 
     //console.log(shown, next_slide); 
     shown = next_slide; 
    } 

    function choose_next() { 
     next_slide = (shown == sc)? 1:shown+1; 
     animate_slider(); 
    } 

    $('.slider #1').css({opacity:1}); //show 1st image 
    var shown = 1; 
    var next_slide; 
    var sc = $('.slider img').length; // total images 
    var iv = setInterval(choose_next,3500); 
    $('.slider_nav').hover(function(){ 
     clearInterval(iv); // stop animation 
    }, function() { 
     iv = setInterval(choose_next,3500); // resume animation 
    }); 
    $('.slider_nav span').click(function(e){ 
     var n = e.target.getAttribute('class'); 
     //console.log(e.target.outerHTML, n); 
     if (n=='prev') { 
      next_slide = (shown == 1)? sc:shown-1; 
     } else if(n=='next') { 
      next_slide = (shown == sc)? 1:shown+1; 
     } else { 
      return; 
     } 
     animate_slider(); 
    }); 
} 

window.onload = slider;

任何想法？謝謝大家:)

來源

2013-07-04 Stéphane

你能提供你的HTML結構？如果我認爲你的身份證號碼是數字（當然它不合適），我是對的嗎？ – sinisake

'$（'。slider'）'將定位該類的所有屬性。如果你有兩個代碼塊，這一段代碼會影響到......這不是你想要的。你最好把它寫成一個jQuery插件，其中的元素是你在插件目標jQuery選擇器中選擇的元素，而不是硬編碼到你的邏輯中。 –

大家好！我已經在http://jsfiddle.net/AzGAH/1/上載了我的代碼（但不工作，速度很快，僅用於查看html代碼） –

我不知道的什麼ü想做的事，但如果你想reusibality：

編輯：我已修改假設你的2張幻燈片是獨立的

這是一個快速的解決方案，因爲提到@大衛·巴克，它會更乾淨做一個jQuery插件

JS：

var sliderTop = "#slider.top"; 
var sliderBottom = "#slider.bottom"; 


function slider(el) { 

    function animate_slider(el){ 
     $(el + shown).animate({ 
      opacity:0 // fade out 
     },1000); 
     $(el + next_slide).animate({ 
      opacity:1.0 // fade in 
     },1000); 
     //console.log(shown, next_slide); 
     shown = next_slide; 
    } 

    function choose_next(el) { 
     next_slide = (shown == sc)? 1:shown+1; 
     animate_slider(e); 
    } 

    $(el + ' #1').css({opacity:1}); //show 1st image 
    var shown = 1; 
    var next_slide; 
    var sc = $(el + ' img').length; // total images 
    var iv = setInterval(choose_next,3500); 
    $(el + '_nav').hover(function(){ 
     clearInterval(iv); // stop animation 
    }, function() { 
     iv = setInterval(choose_next,3500); // resume animation 
    }); 
    $(el + '_nav span').click(function(e){ 
     var n = e.target.getAttribute('class'); 
     //console.log(e.target.outerHTML, n); 
     if (n=='prev') { 
      next_slide = (shown == 1)? sc:shown-1; 
     } else if(n=='next') { 
      next_slide = (shown == sc)? 1:shown+1; 
     } else { 
      return; 
     } 
     animate_slider(el); 
    }); 
} 
window.onload = function() { 
    slider(sliderTop); 
    slider(sliderBottom); 
}

HTML：

<div id="slider" class="top"> 
    <h2>Nos partenaires</h2> 
    <img id="1" src="" alt=""> 
    <img id="2" src="" alt=""> 
    <img id="3" src="" alt=""> 
</div> 
<div class="slider_nav"> 
    <span class="prev">Précédent</span><!-- 
    --><span class="next">Suivant</span> 
</div> 

<div id="slider" class="bottom"> 
    <h2>Nos partenaires</h2> 
    <img id="1" src="" alt=""> 
    <img id="2" src="" alt=""> 
    <img id="3" src="" alt=""> 
</div> 
<div class="slider_nav"> 
    <span class="prev">Précédent</span><!-- 
    --><span class="next">Suivant</span> 
</div>

來源

2013-07-04 18:21:58 isThisLove

回答

相關問題