0

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);
});
4

2 に答える 2

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/

$(window).load は、画像が確実に読み込まれるようにするため、すべてのブラウザーで高さの計算が適切に行われます。各 img 要素を具体的に探すこともできます。

end() を 1 つ見逃したようです。next() を選択してから nextAl() を選択したため、選択を現在の要素に戻すには 2 つの end() が必要になります。

更新されたフィドル

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

于 2012-08-25T18:48:32.337 に答える
0

You are using this, instead of use $slidecontainer or $(this)

You have already assigned this to $slidecontainer variable.

于 2012-08-25T18:46:42.963 に答える