我找不到问题的答案。我认为这是一个很小的问题,但我现在脑子里有些疙瘩。
我需要
alt
的功能使用 <li>
时,特定元素 ( #c11 ) 的属性似乎不起作用之前<img>
虽然没有看起来也不错。
你能帮我吗?
这是我的 JS:
$(document).ready(function() {
$('#slideshow1').cycle({
fx: 'scrollHorz',
auto: false,
before: onBefore,
prev: '#prev',
next: '#next',
timeout: 0,
sync: 1,
speed: '100',
pagerAnchorBuilder: pagerFactory,
after: function() {
$('#c1').html(this.alt);
}
});
var slidesAdded = false;
function onBefore(curr, next, opts) {
if (!opts.addSlide || slidesAdded)
return;
opts.addSlide('<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li>');
opts.addSlide('<li><img src="loadimages/2.jpg" width="800" height="560" alt="Beach 2" /></li>');
opts.addSlide('<li><img src="loadimages/3.jpg" width="800" height="560" alt="Beach 3" /></li>');
opts.addSlide('<li><img src="loadimages/4.jpg" width="800" height="560" alt="Beach 4" /></li>');
slidesAdded = true;
};
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};
<小时/>
这是 html:
<div style="text-align:center;margin:auto;width:300px">
<a href="#"><span id="prev">Prev</span></a>
<a href="#"><span id="next">Next</span></a>
</div>
<div id="slideshow1" class="pics">
<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li>
<li><img src="loadimages/4.jpg" width="800" height="500" alt="Beach 2" /> </li>
</div>
最佳答案
使用 jQuery,可以在 figure
标记的 figcaption
内设置 Alt
标记的样式。这是一个 fiddle ( https://jsfiddle.net/0Lqxb4cp/ ),可能看起来像这样:
.img-fluid { width: 100%; }
figure { display:block; position: relative; }
figcaption { display: block; }
使用此 HTML:
<figure>
<img class="img-fluid" src="image.png" alt="This content will be appended inside the Figure Caption tag!">
</figure>`
接下来是这个 jQuery:
<script src="js/jquery.js"></script>
<script>
$('img', 'figure').each(function() {
$(this).parent().append('<figcaption>' + this.alt + '</figcaption>');
});
</script>
关于javascript - jQuery 循环添加幻灯片 "alt",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6788176/