您可以关闭默认哈希并使用onSlideComplete
回调来更新窗口哈希(演示;和全屏演示):
*注意:h6 也有一个 id(不允许空格)与 h6 的文本(允许空格,并在导航选项卡中使用)
HTML
<ul id="slider">
<li>
<img src="http://placekitten.com/320/200" alt="" />
<h6 id="meow">Meow</h6>
</li>
<li>
<img src="http://placehold.it/320x200" alt="" />
<h6 id="grey">Grey</h6>
</li>
<li>
<img src="http://placebear.com/320/200" alt="" />
<h6 id="rawr">Rawr</h6>
</li>
<li>
<img src="http://dummyimage.com/320x200/000/fff.jpg" alt="" />
<h6 id="bnw">Black & White</h6>
</li>
<li>
<img src="http://placedog.com/320/200" alt="" />
<h6 id="woof">Woof</h6>
</li>
</ul>
脚本
$('#slider').anythingSlider({
// Should links change the hashtag in the URL?
hashTags: false,
// Details at the top of the file on this use (advanced use)
navigationFormatter: function(index, panel) {
return panel.find('h6').text();
},
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
slider.$items.find('h6').each(function(){
// add some prefix to the id so setting the hash doesn't
// make the page jump
this.id = "tmp_" + this.id;
});
},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {
var hash = '#' + slider.$currentPage.find('h6')[0].id.replace(/tmp_/,'');
// remove prefix so hash works on page load
window.location.hash = hash;
}
});
这是另一个使用面板 ID 而不是 h6 ID 的演示。