简单的 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/

$(window).load 确保图像被加载，因此它们的高度计算在所有浏览器中都能正常运行。您也可以专门查找每个 img 元素。

看起来你错过了一个 end()，你选择了 next()，然后是 nextAl()，所以你需要两个 end() 来将选择指向当前元素。

更新的小提琴

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

Answer 2

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

您已经将其分配给 $slidecontainer 变量。