1. 首頁
  2. 問答
  3. 多次更改圖像的jQuery代碼不起作用！

多次更改圖像的jQuery代碼不起作用！

2011-07-07 36 views
1

我對網頁設計一般都很陌生，更不用說jQuery了！我正在嘗試創建一個網頁，其中的圖像順序發生變化，然後返回到開頭並重新開始序列。我在互聯網上發現了一些有用的代碼，但我真的很努力做到這一點。任何指針將不勝感激，謝謝！多次更改圖像的jQuery代碼不起作用！

這裏是我的代碼：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<script src="jquery.js" type="text/javascript"></script> 
<LINK REL=StyleSheet HREF="BSkyBtest.css" TYPE="text/css" MEDIA=screen> 



<script type="text/javascript"> 
    function swapImages(){ 

    var $active = $('#Grid .active'); 
    var $next = ($('#Grid .active').next().length > 0) ? $('#Grid .active').next() : $('#Grid img:first'); 

    $active.fadeOut(function(){ 
    $active.removeClass('active'); 
    $next.fadeIn().addClass('active'); 
}); 
} 

$(document).ready(function(){ 

// Run swapImages() function every 1 second 

setInterval('swapImages()', 1000); 

} 
</script> 
</head> 


<body> 

<div id="Grid"> 
    <img src="grid.png" class="active" /> 
    <img src="yellow.png" /> 
    <img src="green.png" /> 
</div> 

</body> 

</html>

CSS：

body{ 
    background-color:#000000; 
    margin:0; 
    padding:0; 
} 

h1{ 
    color:#ffffff; 
    text-align:center; 
} 

p{ 
color:#ffffff; 
} 

#Grid{ 
    position:relative; 
    width:400px; /* image width */ 
    height:300px; /* image height */ 
} 
#Grid img{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#Grid img.active{ 
    display:block; 
}

來源

2011-07-07 Kate

回答

0

有2個問題，你張貼在這裏的腳本，那些是：

  1. 關閉括號（「）」）缺少jQuery的文件準備好功能。

  2. 只需在上面指定的「setInterval」函數中使用不帶括號和引號的「swapImages」函數作爲「BumbleB2na」即可。

就與此代碼

 
$(document).ready(function(){ 

// Run swapImages() function every 1 second 
setInterval(swapImages, 1000); 

});

一次試試這個，讓我知道如果你仍然遇到這個問題將這段代碼

 
$(document).ready(function(){ 

// Run swapImages() function every 1 second 

setInterval('swapImages()', 1000); 

}

。祝你好運...

編輯：使上述規定的變化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<LINK REL=StyleSheet HREF="BSkyBtest.css" TYPE="text/css" MEDIA=screen> 

<style type="text/css"> 
body{ 
    background-color:#000000; 
    margin:0; 
    padding:0; 
} 

h1{ 
    color:#ffffff; 
    text-align:center; 
} 

p{ 
color:#ffffff; 
} 

#Grid{ 
    position:relative; 
    width:400px; /* image width */ 
    height:300px; /* image height */ 
} 
#Grid img{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#Grid img.active{ 
    display:block; 
} 
</style> 

<script type="text/javascript"> 
    function swapImages(){ 

    var $active = $('#Grid .active'); 
    var $next = ($('#Grid .active').next().length > 0) ? $('#Grid .active').next() : $('#Grid img:first'); 

    $active.fadeOut(function(){ 
    $active.removeClass('active'); 
    $next.fadeIn().addClass('active'); 
}); 
} 

$(document).ready(function(){ 

// Run swapImages() function every 1 second 

setInterval(swapImages, 1000); 

}); 
</script> 
</head> 


<body> 

<div id="Grid"> 
    <img src="http://asset.dailysplice.com/art/NZ-Nature-Sounds-Series-1-logo.jpg" class="active" /> 
    <img src="http://vectorfile.net/wp-content/uploads/2011/01/Nature-vector.jpg" /> 
    <img src="http://img4.sunset.com/i/2010/02/rainforest-nature-trail-0210-m.jpg?300:300" /> 
</div> 

</body> 

</html>

只需複製這個腳本，並將其粘貼到你的HTML文件，那麼你可以觀察後，再完全腳本，三張影像滑動效果，檢查一次，讓我知道如果仍然面臨這個腳本的問題。

Siva

來源

2011-07-07 19:27:33 Siva

+0

非常感謝你的回覆。它仍然沒有工作，但:(想我現在就去嘗試一些其他的東西吧！沒關係！ – Kate

+0

在做出上述指定的更改後，您的腳本正在爲我工​​作，實際上它也適用於您，您是否收到任何錯誤？ – Siva

+0

在完成所需的更改後，使用完整腳本更新了我的答案，並檢查了一次... – Siva

相關問題

 相關問題