使用jquery获取存储在块中的图像源

Getting source of image stored in block by using jquery

本文关键字：图像 jquery 获取 存储 使用      更新时间：2023-09-26

我正在为我的网页制作一个滑块，我正在使用名为"Cycle"的jquery插件。我在访问滑块中使用的图像源时遇到了一个问题。这很难解释，所以这里是我的"头部"部分的代码：

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
    $('#slider').before('<ul id="pager">').cycle({ 
        fx: 'scrollHorz',
        speed: 900,
        timeout: 5500,
        pause: 1,
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="120" height="65" /></a></li>'; 
        } 
    });
</script>

这是html部分：

<div id="slider_container">
    <div id="slider">
        <div class="items">
            <img src="1.jpg"/>
            <div class="info">
                <h2>Tile Nr. 1</h2>
            </div>
        </div>
        <div class="items">                         
            <img src="2.jpg"/>
            <div class="info">
                <h2>Tilte Nr. 2</h2>
            </div>
        </div>
    </div>
    <div id="pager">
    </div>
</div>

在我的sliderdiv中，我想显示块，每个块都包含图像和一些标题，但在pagerdiv中，我们只想显示slider中使用的块中的图像。我确信问题出在第三个javascript中的slide.src表达式中。我应该如何更改该表达式以获得存储在适当的items块中的图像源？

你能在这里设置一个jsFiddle来获取你需要的jquery文件吗？

我猜slide.src不是你想要的。如果slide是对DOM中某个元素的引用，那么您可以访问它的"source"属性，如下所示：$(slide).attr('src')

更新：

原来"slide"是包含div的，所以我们需要这个：

$(slide).find('img').attr('src')

当您检查pagerAnchorBuilder-函数中的参数slide时，您会发现幻灯片是一个类为items的div元素，并且包含img元素作为第一个子元素。因此，您可以访问img及其src属性，如下所示：

pagerAnchorBuilder: function(idx, slide) {
    var source = $('img', slide).attr('src');
    return '<li><a href="#"><img src="' + source + '" width="120" height="65" /></a></li>'; 
}

还有其他一些写它的方法，结果都是一样的：

var source = $(slide).find('img').attr('src');
// or in native js
var source = slide.querySelector('img').getAttribute('src');
var source = slide.querySelector('img').src;
var source = slide.firstElementChild.src
相关文章：