我有一个名为 pgwslidemaster 的 jquery slider 。我想在 div 中显示 slider 标题，可以更改它并向其添加标签。但问题是我看不到它在图像中用 alt 定义的 slider 标题，但我不想要它。有什么办法可以将图像标题从 Alt 更改为单独的标签？ 这是我的片段:
$(document).ready(function() {
$('.pgwSlideshow').pgwSlideshow({
autoSlide: true
});
});.slides {
width: 700px;
margin: 0 auto;
}
.slides ul {
list-style: inside none disc;
margin: 0;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script>
<link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'>
</head>
<body>
<div class="slides">
<ul class="pgwSlideshow">
<li><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" alt="" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/honk-kong.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/dakar.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/toronto.jpg" alt=""></li>
<li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" alt="Monaco"></a></li>
</ul>
</div>谢谢
最佳答案
将 caption 移动到某个 div 中到底需要做什么？ 你想给它添加一些 CSS 吗？ 如果是这种情况，那么您可以通过将 css 应用于标题跨度类 .ps-caption 来实现。
$(document).ready(function() {
$('.pgwSlideshow').pgwSlideshow({
autoSlide: true
});
});.slides {
width: 700px;
margin: 0 auto;
}
.slides ul {
list-style: inside none disc;
margin: 0;
padding: 0;
}
.pgwSlideshow .ps-caption { /* Override code here*/
background: rgba(333,0,0,0.5) !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script>
<link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'>
</head>
<body>
<div class="slides">
<ul class="pgwSlideshow">
<li><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" alt="" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/honk-kong.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/dakar.jpg" alt=""></li>
<li><img src="http://static.pgwjs.com/img/pg/slideshow/toronto.jpg" alt=""></li>
<li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" alt="Monaco"></a></li>
</ul>
</div>关于javascript - 将图像 slider 标题更改为静态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40989765/