simple jquery slideshow script - Is there something wrong with my jquery syntax?

问题

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

For the most part the above script works well. The only problem is the css for image height isn't being applied to the parent container. When I try this in the browser console it works perfectly. When I have the script called in the page it doesn't apply the image height. It does everything else though.

this is the 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>

The following turned out to be the answer:

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

回答1:

Try,

<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 ensures that images are loaded, so that their hieght calcualtion goes fine in all browsers. You can specifically look for each img element also.

Looks like you missed one end(), you selected next() and then nextAl() so you will need two end() to point selection back to current element.

Updated fiddle

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

回答2:

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

You have already assigned this to $slidecontainer variable.

来源：https://stackoverflow.com/questions/12124606/simple-jquery-slideshow-script-is-there-something-wrong-with-my-jquery-syntax

标签

jquery

syntax

slideshow