gpt4 book ai didi

javascript - jQuery SlideShow 不显示所有图像

转载 作者:行者123 更新时间:2023-12-03 09:57:03 24 4
gpt4 key购买 nike

<html>
<head>
<meta charset = "utf-8/">
<title> Jquery </title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/>

</head>

<script type = "text/javascript">

function Slider() {

$(".slider #1").show ("fade" , 500);

$(".slider #1").delay(5500).hide("slide", {direction : "left"}, 500);


var sc = $("slider img").size();
var count = 2;

setInterval(function(){
$(".slider#"+count).show("slide",{direction:'right'}, 500);
$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);

if ( count == sc ) {

count = 1;

}else {
count = count+1;
}


},6500);
}



</script>




<body onload = "Slider();">


<div id = "header">
<h1> Jquery</h1>

</div>

<div id = "container">

<div class = "slider" >
<img id = "1" src = "North.jpg" border = "0" alt = "North"/>
<img id = "2" src = "Android.jpg" border = "0" alt = "Android"/>
<img id = "3" src = "Wolf.jpg" border = "0" alt = "Wolf"/>


</div>

<div class = "shadow">

</div>


</div>

</body>



</html>

好的,我正在尝试用 jQuery 创建幻灯片。第一个图像工作正常,因为它在最后有一个平滑的淡入和滑出运动,但正如你所看到的,我有三个图像,另外两个没有出现,所以屏幕只是空白,默认的阴影图像位于底部(没关系)非常感谢帮助:)

最佳答案

.sliderid 之间需要有一个空格。如果没有空格,选择器表示具有 slider 类和 id x 的元素。但是,空格表示具有 slider 类且具有 id x 后代的元素。

 $(".slider #"+count)

function Slider() {

$(".slider #1").show ("fade" , 500);

$(".slider #1").delay(5500).hide("slide", {direction : "left"}, 500);


var sc = $("slider img").size();
var count = 2;

setInterval(function(){
$(".slider #"+count).show("slide",{direction:'right'}, 500);
$(".slider #"+count).delay(5500).hide("slide",{direction:'left'},500);

if ( count == sc ) {

count = 1;

}else {
count = count+1;
}


},6500);
}
Slider();
<meta charset = "utf-8/">
<title> Jquery </title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/>



<div id = "header">
<h1> Jquery</h1>

</div>

<div id = "container">

<div class = "slider" >
<img id = "1" src = "North.jpg" border = "0" alt = "North"/>
<img id = "2" src = "Android.jpg" border = "0" alt = "Android"/>
<img id = "3" src = "Wolf.jpg" border = "0" alt = "Wolf"/>


</div>

<div class = "shadow">

</div>


</div>

更新

由于所有 id 在文档中都应该是唯一的,因此单独使用 id 就足够了。

$("#"+count)

关于javascript - jQuery SlideShow 不显示所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30698359/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com