如何使用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屋!
查看全文