簡單的jQuery幻燈片腳本 - 我的jQuery語法有什麼問題嗎？

Question

var j$ = jQuery.noConflict();

j$(document).ready(function(){

j$.fn.slideShow = function(timeOut){

var $slidecontainer = this;
this.children(':gt(0)').hide();

setInterval(function() {

$slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().appendTo($slidecontainer);}, timeOut || 1000);

var imgheight = this.children('.on').outerHeight();
this.css('height', imgheight);
};

j$(function() {
j$('.slideshow').slideShow(7000);});
});

大部分上面的腳本運行良好。唯一的問題是圖像高度的css沒有被應用到父容器。當我在瀏覽器控制檯中嘗試此功能時，它可以很好地工作當我在頁面中調用腳本時，它不會應用圖像高度。它盡其他一切。

這是HTML

<div id="slideshow" class="slideshow">
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
</div>

下面竟然是答案：

var j$ = jQuery.noConflict(); 
j$.fn.slideShow = function (timeOut) { 

    var $slidecontainer = this; 
    $slidecontainer.children(':gt(0)').hide(); 

    setInterval(function() { 

     $slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().end().appendTo($slidecontainer); 
    }, timeOut || 1000); 

    var imgheight = $slidecontainer.children('img').first().outerHeight(); 
    $slidecontainer.css('height', imgheight); 
}; 
j$(window).load(function() { 
    j$('.slideshow').slideShow(7000); 
}); 

Answer 1

嘗試，

<div id="slideshow" class="slideshow"> 
     <img width="970" height="300" src="s_logo_lg.gif" class="" > 
     <img width="970" height="300" src="lg.gif" class="" > 
     <img width="970" height="300" src="es_logo_lg.gif" class="" > 
     <img width="970" height="300" src="g.gif" class="" > 
     <img width="970" height="300" src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" class="" > 
</div> 

---

var j$ = jQuery.noConflict(); 
j$.fn.slideShow = function (timeOut) { 

    var $slidecontainer = this; 
    this.children(':gt(0)').hide(); 

    setInterval(function() { 

     $slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().end().appendTo($slidecontainer); 
    }, timeOut || 1000); 

    var imgheight = this.children('img').first().outerHeight(); 
    this.css('height', imgheight); 
}; 
j$(window).load(function() { 

    j$(function() { 
     j$('.slideshow').slideShow(7000); 
    }); 
}); 

http://jsfiddle.net/RTZK6/

$（窗口）.load確保圖像加載，讓自己hieght calcualtion去在所有瀏覽器的罰款。你也可以專門查找每個img元素。看起來你錯過了一個end（），你選擇next（）然後nextAl（），所以你需要兩個end（）來將選擇點回到當前元素。

更新後的小提琴

http://jsfiddle.net/RTZK6/2/

Answer 2

您使用this，而不是使用$slidecontainer或$(this)

你甲肝e已將此分配給$ slidecontainer變量。