jquery - jQuery 将其他 div 中的图像附加到选定的 div

Question

我已经为一些杂志问题创建了一个图片库，我想把它设计成我所附图片中的东西，但我不确定你是否可以做我想要的，

我基本上想 jQuery 附加 div 1 和 3 中的图像并将其放在当前选择的 div（div 2）上的图像后面。

提前感谢您的帮助。

到目前为止，我还有一个用于代码的 js fiddle：http: //jsfiddle.net/huddds/5Z39B/1/

在此处输入图像描述

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;}

</p>

score 1 · Accepted Answer

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;}