gpt4 book ai didi

Javascript Jquery 幻灯片

转载 作者:行者123 更新时间:2023-11-28 07:18:28 29 4
gpt4 key购买 nike

jquery 中的代码是什么,可以让幻灯片放映在最后一张照片上单击“下一步”后显示第一张照片。我知道我只需要写一次文档准备好,但我还没有这样做,但我会的。这是我的代码

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="slides.min.jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#links").mouseover(function() {
$("#links").animate({
'opacity': '1'
});
});
});
$(document).ready(function() {
$("#links").mouseout(function() {
$("#links").animate({
'opacity': '0'
});
});
});
$(document).ready(function() {
$("#rechts").mouseover(function() {
$("#rechts").animate({
'opacity': '1'
});
});
});
$(document).ready(function() {
$("#rechts").mouseout(function() {
$("#rechts").animate({
'opacity': '0'
});
});
});
$(document).ready(function() {
$("#links").click(function() {
$("#slider").animate({
left: '+=600px'
}, 1000);
});
});
$(document).ready(function() {
$("#rechts").click(function() {
$("#slider").animate({
left: '-=600px'
}, 1000)
});
});
</script>
<meta charset="utf-8">
<title>SlideShow</title>
<style type="text/css">
#Holder {
height: 400px;
width: 600px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
position: relative;
}
#slider {
height: 400px;
width: 2500px;
position: relative;
z-index: 1;
float: left;
}
#slider img {
margin:0px;
}
#Holder #rechts {
height: 100px;
width: 50px;
position: absolute;
z-index: 10;
left: 550px;
top: 0px;
opacity: 0;
padding-top: 150px;
cursor:pointer;
}
#Holder #links {
height: 100px;
width: 50px;
padding-top: 150px;
position: absolute;
z-index: 10;
left: 0px;
cursor:pointer;
opacity:0
}
</style>
</head>

<body>
<h1><center>DIT IS MIJN OPDRACHT VAN DIETER(SLIDESHOW)</center></h1>
<div id="Holder">
<div id="slider">
<img src="images/Auto1.JPG" width="600" height="400">
<img src="images/Auto2.JPG" width="600" height="400">
<img src="images/Auto3.JPG" width="600" height="400">
<img src="images/Auto4.JPG" height="400" width="600" />
</div>
<div id="rechts">
<img src="images/PijlRechts.png" width="50" height="100" />
</div>
<div id="links">
<img src="images/PijlLinks.png" width="50" height="100" />
</div>
</div>
</div>
</body>
</html>

最佳答案

您应该检查一个元素是否有朝向一侧的兄弟元素,这可以通过 $('element').nextAll().length > 0$('element ').prevAll().length > 0成功了:)这是你想要的?

http://plnkr.co/edit/T6K4TLz4pBT0PDoL5OzJ?p=preview

关于Javascript Jquery 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30568945/

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