jquery - 如何将一个 div 中的图像源获取到另一个 div？

Question

我正在做 UI 设计，如果我单击它，如何将一个 div 中的图像源获取到另一个 div。就像在 FB 中一样，我怎样才能将全屏图像的来源放到右箭头按钮。我正在使用 jQuery、html、css。

全屏：

$('.fullscreen').bind('click', function(event) {
    var sectionId = $(this).parents('ul').attr('id');
    var outputId  sectionId.replace('ul','img');
    var fullObj = $('#singleTemp').clone();
    var imgTarget = $('#' + outputId).attr('src');

    fullObj.find('#full').attr('src', imgTarget);

    $('#fullscreenTemp').html(fullObj.html());

    var target = document.getElementById('fullscreenTemp');
    $('#fullscreenTemp').show();

    screenfull.request(target);
});

screenfull.js 是我的全屏插件

html 到箭头：

<div id="singleTemp" style="display:none">
    <div id="fullDiv" style="text-align: center">
        <div class="fs-main"> 
            <div class="fs-pic">
                <img id="full" style="max-height:100%; max-width:100%;" alt="imagecontainer image" src=""/>
            </div>
            <div class="fs-leftarrow">
                <img  id="1" src="jqe13/image/leftarrow.PNG"/>
            </div>
            <div class="fs-rightarrow">
                <img src="jqe13/image/rightarrow.PNG"/>
            </div>
            <div class="fs-remove">
                <img src="jqe13/image/removee.png" height="20"onclick=""/>
            </div>
            <div class="fs-like">
                <img src="jqe13/image/like.PNG" height="45"/>
            </div>
            <div class="fs-unlike">
                <img src="jqe13/image/unlike.PNG" height="45"/>
            </div>
        </div>
    </div>
</div>

html到图片：

<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg"  rel="tooltip" content="
     <img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
  <img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
  <li id="outfullscreen"><a href="#">
    <img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" 
     title="Full Screen"></a></li>
    </ul>
 </div>

我在 outputimageId 中有图像。

Answer 1

var src = $("#someImg").attr("src");

var src = $("#otherImg").attr("src",src);

只需设置 src

Answer 2

我认为您正在寻找滑块效果。有很多免费的 jquery 滑块插件。

例如： http: //www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/

演示

Answer 3

您可以使用如下代码：

/// First div
<div id="first">
    <img alt="example" src="\images\test.jpg" />
 </div>

// second div 
<div id="first">
    <img alt="example2" src="\images\blank.jpg" />
 </div>



var divsrc1 = $('img[alt="example"]').attr('src');

var divsrc2 = $('img[alt="example2"]').attr('src');
divsrc2 = divsrc1;
alert("source of image with alternate text = example - " + divsrc2);

这是演示

使用下面的代码：

var divsrc1 = $('#first img').attr('src');
//alert("source of image with alternate text = example - " + divsrc1);
var divsrc2 = $('#sec img').attr('src');
//alert("source of image with alternate text = example - " + divsrc2);
divsrc2 = divsrc1;
alert("source of image with alternate text = example - " + divsrc2);

Answer 4

var input = $("#rightoutputimgae").prop("src");
$("#otherImg").prop("src",input );