jquery查找ul>li里 img的 alt属性="xxxx"时,img的src的值

html:

<ul>
	<li><img src="" alt="xxxx1" /></li>
	<li><img src="" alt="xxxx2" /></li>
	<li><img src="" alt="xxxx3" /></li>
	<li><img src="" alt="xxxx4" /></li>
	<li><img src="" alt="xxxx5" /></li>
</ul>

jquery:

function getSRC(alt){
        return $('li').find('img').filter('[alt="'+alt+'"]').attr('src');
    }


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下代码来实现一个基本的轮播图: ```html <div class="slideshow-container"> <ul class="slides"> <li><img src="../images/1.jpg" alt=""></li> <li><img src="../images/2.jpg" alt=""></li> <li><img src="../images/3.jpg" alt=""></li> <li><img src="../images/4.jpg" alt=""></li> <li><img src="../images/5.jpg" alt=""></li> <li><img src="../images/6.jpg" alt=""></li> </ul> <span class="prev">❮</span> <span class="next">❯</span> </div> <script src="../jquery-3.7.0.js"></script> <script> $(document).ready(function() { var slideIndex = 1; showSlides(slideIndex); $(".prev").click(function() { showSlides(slideIndex -= 1); }); $(".next").click(function() { showSlides(slideIndex += 1); }); function showSlides(n) { var i; var slides = $(".slides li"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; } }); </script> ``` CSS代码如下: ```css .slideshow-container { position: relative; margin: auto; } .slides { list-style: none; padding: 0; margin: 0; } .slides li { display: none; } .prev, .next { position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .slides li img { width: 100%; height: auto; } ``` 这的核心是使用 JavaScript 来控制轮播图。`showSlides(n)` 函数用于显示当前轮播图,其中参数 `n` 表示轮播图的索引号。通过点击“上一页”和“下一页”按钮,可以切换轮播图。在这个例子中,我们使用了 jQuery 库来简化 JavaScript 代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值