jquery - jQueryは、他のdivから選択したdivに画像を追加します

Question

いくつかの雑誌の問題の画像ギャラリーを作成しました。添付の画像のようにスタイルを設定したいのですが、私が求めていることができるかどうかわかりません。

私は基本的に、div 1 と 3 から画像を jQuery で追加し、現在選択されている div (div 2) の画像の後ろにドロップしたいと考えています。

助けてくれてありがとう。

これまでのところ、コード用の js フィドルもあります: 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;}