jQuery将图像从其他div添加到选定的div

我为某些杂志问题创建了图像库，我想将它设置为附加在图像中的某些东西，但我不确定是否可以执行之后，jQuery将图像从其他div添加到选定的div

我基本上想要jQuery追加图像从div 1和3，并将其放在当前选定div（div 2）的图像后面。

在此先感谢您的帮助。

我也得到了代码中的JS提琴至今：http://jsfiddle.net/huddds/5Z39B/1/

enter image description here

jQuery的

var issueTotal = 0; 

$('#backIssue0').show(); 

$('.prevButton').hide();  

$('.nextButton').click(function(e) { 
    e.preventDefault(); 

    issueTotal = issueTotal + 1; 

    if(issueTotal > 0){ 
     $('.prevButton').show(); 
    } 
    if(issueTotal < 4){ 
     $('.nextButton').show(); 
    }  
    if(issueTotal > 3){ 
     $('.nextButton').hide(); 
    } 

    $("#backIssue" + issueTotal).show(); 
    if(issueTotal > 0) { 
     $('#backIssue' + (issueTotal - 1)).hide(); 
    } 

}); 


$('.prevButton').click(function(e) { 
    e.preventDefault(); 

    issueTotal = issueTotal - 1; 

    if(issueTotal > 1){ 
     $('.prevButton').show(); 
    } 
    if(issueTotal < 1){ 
     $('.prevButton').hide(); 
    } 
    if(issueTotal < 4){ 
     $('.nextButton').show(); 
    }  
    if(issueTotal > 3){ 
     $('.nextButton').hide(); 
    } 

    $("#backIssue" + issueTotal).show(); 
    if(issueTotal > 0) { 
     $('#backIssue' + (issueTotal - 1)).hide(); 
    } 
});

HTML

<div id="buttons"> 
    <a href="#" class="prevButton">PREVIOUS</a> 
    <a href="#" class="nextButton">NEXT</a> 
</div> 
<div id=issueContainer> 
<div id="backIssue0"> 
    <img src="http://www.tuwidesign.com/tuwi/wp-content/uploads/2009/05/web_designer_magazine.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue1"> 
    <img src="http://blogof.francescomugnai.com/wp-content/uploads/2008/07/cover_web_designer.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue2"> 
    <img src="http://www.onerutter.com/wp-content/uploads/2011/10/WD189.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue3"> 
    <img src="http://www.ukhumourweb.co.uk/web-design-201.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue4"> 
    <img src="http://www.solidshops.com/blog/wp-content/uploads/web-designer-magazine1.jpg" width="100" alt="#" /> 
</div> 
</div>

CSS

#backIssue0{width:100px;display:none; float:left;} 
#backIssue1{width:100px;display:none;float:left;} 
#backIssue2{width:100px;display:none;float:left;} 
#backIssue3{width:100px;display:none;float:left;} 
#backIssue4{width:100px;display:none;float:left;} 
.nextButton{margin-left:50px;} 
.previousButton{} 
#issueContainer{width:100px;height:130px; overflow:hidden;} 
#buttons{clear:both;}

来源

2012-12-17 huddds

首先也扩展它，你应该自己尝试布局的东西，之后询问具体问题的问题。我们不能为你做所有的工作:) – andrewpey

只是尝试使用“准备使用”插件，或者你可以阅读代码并获得灵感：http://fredhq.com/projects/roundabout/ – gearsdigital

@andrewpey I我不想让别人为我做这件事，我只是想知道这是否可能，以及可能使用哪些方法。 – huddds

http://jsfiddle.net/aEvhh/

这个怎么样？

HTML：

<div id="buttons"> 
    <a href="#" class="prevButton">PREVIOUS</a> 
    <a href="#" class="nextButton">NEXT</a> 
</div> 
<div id=issueContainer> 
<div id="backIssue0" class="issue"> 
    <img src="http://www.tuwidesign.com/tuwi/wp-content/uploads/2009/05/web_designer_magazine.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue1" class="issue"> 
    <img src="http://blogof.francescomugnai.com/wp-content/uploads/2008/07/cover_web_designer.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue2" class="issue"> 
    <img src="http://www.onerutter.com/wp-content/uploads/2011/10/WD189.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue3" class="issue"> 
    <img src="http://www.ukhumourweb.co.uk/web-design-201.jpg" width="100" alt="#" /> 
</div> 
<div id="backIssue4" class="issue"> 
    <img src="http://www.solidshops.com/blog/wp-content/uploads/web-designer-magazine1.jpg" width="100" alt="#" /> 
</div> 
</div>

的Javascript：

var issueTotal = 0; 
function update_issues(){ 
    $('.issue').removeClass('comingup').hide(); 
    if(issueTotal >0){ 
     console.log('#backIssue' + (issueTotal -1)); 
    $('#backIssue' + (issueTotal -1)).addClass('comingup').show(); 
    } 
    $('#backIssue' + (issueTotal)).show(); 
    if(issueTotal <4){ 
    $('#backIssue' + (issueTotal +1)).addClass('comingup').show(); 
    } 
    if(issueTotal > 0){ 
     $('.prevButton').show(); 
    } 
    if(issueTotal < 4){ 
     $('.nextButton').show(); 
    }  
} 


    $('.nextButton').click(function(e) { 
     e.preventDefault(); 

     issueTotal = issueTotal + 1; 
     update_issues(); 
    }); 
    update_issues(); 

    $('.prevButton').click(function(e) { 
     e.preventDefault(); 

     issueTotal = issueTotal - 1; 
     update_issues(); 

    });

CSS：

.issue { width:100px;display:none;float:left;} 
.nextButton{margin-left:50px;} 
.previousButton{} 
#issueContainer{width:300px;height:130px; overflow:hidden;} 
.issue.comingup { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } 
#buttons{clear:both;}

来源

2012-12-17 14:26:05

非常感谢你的帮助，我确信我可以用这个例子来玩游戏。 – huddds