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元素。

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

更新了小提琴

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

Answer 2

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

您已将此分配给$ slidecontainer变量。

简单的jquery幻灯片脚本 - 我的jquery语法有问题吗？

2 个答案: