简单的jquery幻灯片脚本-我的jquery语法有问题吗? [英] simple jquery slideshow script - Is there something wrong with my jquery syntax?

问题描述

var j$ = jQuery.noConflict();

var j$ = jQuery.noConflict();

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

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

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

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

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

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

setInterval(function() {

setInterval(function() {

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

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

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

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

在大多数情况下，以上脚本效果很好.唯一的问题是图像高度的css没有应用到父容器.当我在浏览器控制台中尝试此操作时，它可以完美运行.当我在页面中调用脚本时，它不应用图像高度.它会做其他所有事情.

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.

这是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>

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

推荐答案

尝试

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

$(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.

好像您错过了一个end()，先选择了next()，然后选择了nextAl()，所以您将需要两个end()来将选择指向当前元素.

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.

更新的小提琴

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

这篇关于简单的jquery幻灯片脚本-我的jquery语法有问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！