Question

我有一个名为pgwslidemaster.i的jquery滑块想在div中显示滑块标题，可以更改它并为其添加标签。但问题是我无法看到它在图像中用alt定义的滑块标题，但我不想要它。有没有办法将图像的标题从Alt更改为单独的标记？这是我的片段：

＆＃13;

$(document).ready(function() {
    $('.pgwSlideshow').pgwSlideshow({
      autoSlide: true
    });
});

＆＃13;

.slides {
  width: 700px;
  margin: 0 auto;
}

.slides ul {
  list-style: inside none disc;
  margin: 0;
  padding: 0;
}

＆＃13;

<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>

＆＃13;

由于

Answer 1

通过将标题移动到某个div中，您需要做什么？你想为它添加一些CSS吗？如果是这种情况，那么你可以通过将css应用于标题span类.ps-caption来实现。

＆＃13;

$(document).ready(function() {
    $('.pgwSlideshow').pgwSlideshow({
      autoSlide: true
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

希望这对你有用。我为每张幻灯片添加了id，并在标题中添加了您想要的链接和文本的数据属性，然后将其附加在标题范围内，并在afterSlide事件上添加超链接。

＆＃13;

$(document).ready(function() {
    $('.pgwSlideshow').pgwSlideshow({
      autoSlide: true,
afterSlide: function(id) { 
      	$('.pgwSlideshow .ps-caption').html("<a href='"+ $('#slide-'+id).attr('data-href') +"'>"+ $('#slide-'+id).attr('data-text')+"</a>").show();
      }
    });
});

＆＃13;

.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;
}

＆＃13;

<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" id='slide-1' data-text="Golden Gate Bridge" data-href='http://en.wikipedia.org/wiki/Monaco'></li>
        <li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" id='slide-2' data-text="Rio" data-href="http://en.wikipedia.org/wiki/Monaco"></li>
        <li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" data-text="london" id='slide-3' data-href="http://en.wikipedia.org/wiki/Monaco" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li>
        <li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" data-text="Monaco" id='slide-4' data-href="http://en.wikipedia.org/wiki/Monaco"></a></li>
	</ul>
</div>

＆＃13;

将图像滑块标题更改为静态

2 个答案: