如何使用Javascript查找下一个图像src [英] How to find Next Image src with Javascript
本文介绍了如何使用Javascript查找下一个图像src的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经选择了这样做的方式，所以我可以将一手完整的图片放到一个文件夹中，就是这样，没有编辑也没有重新调整大小，简单！
我尝试了很多方法，但没有任何效果，我的最新尝试是 next = $（。image-container）。find（img [src =+ Img +]）。 next（'img'）。attr（'src'）; 但仍然不行。
这是我到目前为止所提出的，任何帮助都会很棒，谢谢
< div id = removed-container style = 身高：600px; > ;
< div id = 已删除 style = height：600px; >
< div style = float：left;宽度：200px; >
< h1 > < span > 图库< / span > < / h1 >
< ul id = nav >
< li > < a href = id = 此处 > 图库< / a >
< ul >
< li > < a href = ＃ data-albumid = gallery / fld01 / > 2015 < / a > < ; / li >
< li > < a href = ＃ data-albumid = gallery / fld02 / > 2015 < / a > < / li >
< li > < a href = ＃ data-albumid = gallery / fld03 / > 2015 < / a > < / li >
< li > < a href = ＃ data-albumid = gallery / fld04 / > 2015 < / a > < / li >
< li > < a href = ＃ data-albumid = gallery / fld05 / > 2015 < / a > < / li >
< / ul >
< / li >
< li > < a href = index.html > ; 返回主页< / a > < / li >
< / ul >
< / div >
< div class = image-container > < / div >
< script type = text / javascript > $（ document ）。ready（ function （）{
$（ a）。click（ function （）{
var dir_path = $（ this ）。data（ albumid）;
LoadGallery（dir_path）;
return false ;
}）;
}）;
function LoadGallery（dir_path）{
$ .ajax（{
url：dir_path，
成功： function （data）{
$（ .image-container）。empty（）;
$（data）.find（ a：contains（.jpg），a：contains（.png），a：contains（.jpeg））。each（ function （）{
this .href.replace（ window 。 location .host， ）。 replace（ http：///， ）; file = dir_pat h + $（ this ）。text（）;
$（ .image-container）。append（$（ < a href ='java<！ - no - > script：;'class ='thumb'data-src = ' + file + '>< img src =' + file + < span class =code-string> 'title ='点击放大'alt ='＃'/>< / a> ））;
if （$（ .image-container）。children（ a）。length == 30 ）{
return false ;
}
}）;
$（ 。thumb）。bind（ 点击， function （）{
var Popup = < div class ='bg' >< / div> + < div class ='wrapper'>< img src ='< img src =''/> + < label href = 'javascript：;'class ='prev-image'>«< / label>< label href ='javascript：;'class ='next-image'>»< / label>< a href = 'java<！ - no - > script：;'class ='close'title ='关闭'>关闭< / a>;
Img = $（ this ）。attr（ data-src），
$（ body）。prepend（Popup）;
$（ 。bg）。height（$（窗口）高度（）* 4）。
$（ .wrapper img）。attr（ src，Img）;
$（ 。prev-image）。bind（' 点击'， function （）{
alert（ 上一页）
}）
$（ .next-image）。bind（ ' 点击'，功能（）{
next = $（ .image-container）。find（ img [src = + Img + ] ）。next（' img'）。attr（' src'）;
// 提醒（下一个）
}）
$（ 。close）。bind（ ' 点击'，功能（）{
$（此）。兄弟姐妹（ img）。attr（ src， ）
.closest（ .wrapper）。remove（）;
$（ 。bg）。remove（ ）;
}）;
}）;
}
}）;
} < / script >
< div class = clear > < / div >
< / div >
< < span class =code-leadattribute> / div >
解决方案
（。image-container）。find（img [src =+ Img +]）。next（'img'）。attr（'src'）; 但仍然不好。
这是我到目前为止所提出的，任何帮助都会很棒，谢谢
< div id = removed-container style = height ：600px; >
< div id = 已删除 style < span class =code-keyword> = height：600px; >
< div style = float：left;宽度：200px; >
< h1 > < span > 图库< / span > < / h1 >
< ul id = nav >
< li > < a href = id = 此处 > 图库< / a >
< ul >
< li > < a href = ＃ data-albumid = gallery / fld01 / > 2015 < / a > < ; / li >
< li > < a href = ＃ data-albumid = gallery / fld02 / > 2015 < / a > < / li >
< li > < a href = ＃ data-albumid = gallery / fld03 / > 2015 < / a > < / li >
< li > < a href = ＃ data-albumid = gallery / fld04 / > 2015 < / a > < / li >
< li> < a href = ＃ data-albumid = gallery / fld05 / > 2015 < / a > < / li >
< / ul >
< / li >
< li > < a href = index.html > ; 返回主页< / a > < / li >
< / ul >
< / div >
< div class = image-container > < / div >
< script type = text / javascript >
< blockquote>（ document ）。ready（ function （）{
（ a）。click（ function （）{
var dir_path =
I have chosen this way of doing it so i can just drop a hand full of images in to a folder and that's it, no editing and no re-sizing to do, Simple!
I have tried many ways but nothing works, my latest attempt is next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src'); but still no good.
This is what i have come up with so far, any help would be great, Thank's
<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
<h1> <span>The Gallery</span> </h1>
<ul id="nav">
<li><a href="" id="here">Gallery</a>
<ul>
<li><a href="#" data-albumid="gallery/fld01/">2015</a></li>
<li><a href="#" data-albumid="gallery/fld02/">2015</a></li>
<li><a href="#" data-albumid="gallery/fld03/">2015</a></li>
<li><a href="#" data-albumid="gallery/fld04/">2015</a></li>
<li><a href="#" data-albumid="gallery/fld05/">2015</a></li>
</ul>
</li>
<li><a href="index.html">Back to home</a></li>
</ul>
</div>
<div class="image-container"></div>
<script type="text/javascript"> $(document).ready(function () {
$("a").click(function () {
var dir_path=$(this).data("albumid");
LoadGallery(dir_path);
return false;
});
});
function LoadGallery(dir_path) {
$.ajax({
url: dir_path,
success: function(data) {
$(".image-container").empty();
$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
$(".image-container").append($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));
if ($(".image-container").children("a").length == 30) {
return false;
}
});
$(".thumb").bind('click', function() {
var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>«</label><label href='javascript:;' class='next-image'>»</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
Img = $(this).attr("data-src"),
$("body").prepend(Popup);
$(".bg").height($(window).height()*4);
$(".wrapper img").attr("src", Img);
$(".prev-image").bind ('click',function() {
alert("Prev")
})
$(".next-image").bind ('click',function() {
next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
//alert(next)
})
$(".close").bind ('click',function() {
$(this).siblings("img").attr("src", "")
.closest(".wrapper").remove();
$(".bg").remove();
});
});
}
});
} </script>
<div class="clear"></div>
</div>
</div> 解决方案
(".image-container").find("img[src=" + Img + "]").next('img').attr('src'); but still no good.
This is what i have come up with so far, any help would be great, Thank's
<div id="removed-container" style="height: 600px;"> <div id="removed" style="height: 600px;"> <div style="float: left; width: 200px;"> <h1> <span>The Gallery</span> </h1> <ul id="nav"> <li><a href="" id="here">Gallery</a> <ul> <li><a href="#" data-albumid="gallery/fld01/">2015</a></li> <li><a href="#" data-albumid="gallery/fld02/">2015</a></li> <li><a href="#" data-albumid="gallery/fld03/">2015</a></li> <li><a href="#" data-albumid="gallery/fld04/">2015</a></li> <li><a href="#" data-albumid="gallery/fld05/">2015</a></li> </ul> </li> <li><a href="index.html">Back to home</a></li> </ul> </div> <div class="image-container"></div> <script type="text/javascript">
(document).ready(function () {
("a").click(function () { var dir_path=
这篇关于如何使用Javascript查找下一个图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
