如何從一個div轉到滑塊中的特定幻燈片？
[英]How do I go from one div to a specific slide in a slider?
問題描述
假設我有兩頁。 一個是index.html ，另一個是page.html 。 在page.html中，我有一個帶有9個幻燈片的滑塊（使用插件StackSlider ）。 現在，當我單擊index.html中的鏈接時，我想轉到特定的幻燈片，例如page.html中的幻燈片4。
我怎樣才能做到這一點？
我嘗試了以下操作，但沒有成功
這是我的index.html代碼
<body>
<a href="page.html#one">go to 1st slide of page.html</a>
<a href="page.html#two">go to 3rd slide of page.html</a>
</body>
這是page.html的代碼的一部分
<section class="main">
<ul>
<li id="one">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li id="two">
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
</ul>
</section>
2 個解決方案
解決方案1
0 2018-05-13 13:06:56
該插件未讀取哈希值，這就是為什么它無法正常工作的原因。 但是，您可以將所需的幻燈片與哈希一起傳遞，並通過start選項將其傳遞給插件。 像這樣：
var start = location.hash || 5; $('#st-stack').stackslider({ start: start });
<link href="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/style.css" rel="stylesheet"/> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/modernizr.custom.63321.js"></script> <script type="text/javascript" src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/jquery.stackslider.js"></script> <section class="main"> <ul id="st-stack" class="st-stack-raw"> <li> <div class="st-item"> <a href="http://drbl.in/fgQV"><img src="//tympanus.net/Development/StackSlider/images/1.jpg" /></a> </div> <div class="st-title"> <h2>Graverobber</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fpRz"><img src="//tympanus.net/Development/StackSlider/images/2.jpg" /></a> </div> <div class="st-title"> <h2>Hideous Snake Queen</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fGVs"><img src="//tympanus.net/Development/StackSlider/images/3.jpg" /></a> </div> <div class="st-title"> <h2>Queen of Hearts</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fgvZ"><img src="//tympanus.net/Development/StackSlider/images/4.jpg" /></a> </div> <div class="st-title"> <h2>Dead Pirate vs Kraken</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fyfM"><img src="//tympanus.net/Development/StackSlider/images/5.jpg" /></a> </div> <div class="st-title"> <h2>Mountain Lion</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fCmJ"><img src="//tympanus.net/Development/StackSlider/images/6.jpg" /></a> </div> <div class="st-title"> <h2>Flying Skull</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fsMv"><img src="//tympanus.net/Development/StackSlider/images/7.jpg" /></a> </div> <div class="st-title"> <h2>The Fly & Bureaucratic Elephant</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fGOf"><img src="//tympanus.net/Development/StackSlider/images/8.jpg" /></a> </div> <div class="st-title"> <h2>Failsnake</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fypr"><img src="//tympanus.net/Development/StackSlider/images/9.jpg" /></a> </div> <div class="st-title"> <h2>Cultist</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fEmG"><img src="//tympanus.net/Development/StackSlider/images/10.jpg" /></a> </div> <div class="st-title"> <h2>Crusader & Viking</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/ffiw"><img src="//tympanus.net/Development/StackSlider/images/11.jpg" /></a> </div> <div class="st-title"> <h2>Crocodile</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fqWx"><img src="//tympanus.net/Development/StackSlider/images/12.jpg" /></a> </div> <div class="st-title"> <h2>Captain Banana</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fkuv"><img src="//tympanus.net/Development/StackSlider/images/13.jpg" /></a> </div> <div class="st-title"> <h2>Werewolf</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fIli"><img src="//tympanus.net/Development/StackSlider/images/14.jpg" /></a> </div> <div class="st-title"> <h2>Vegetables</h2> <h3>by Isaac Montemayor</h3> </div> </li> </ul> <p>Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.</p> </section>
我只是默認設置為5，這樣您就可以看到效果了，但是在您的項目中，如果您將用戶與hash的幻燈片一起重定向到用戶，它將在沒有默認值的情況下為您工作。
解決方案2
0 已采納 2018-05-13 14:44:10
StackSlider無法使用給定的參數，因此您應該對其進行一些修復。
轉到jquery.stackslider.js中的函數_init而不是行：this.current = 0; 放置在以下位置：if（！this.options.current）this.current = 0; 否則this.current = this.options.current-1;
現在，您可以傳遞要顯示的幻燈片的初始參數。
現在您的html應該看起來像這樣->
<a href="page.html#1">go to 1st slide of page.html</a><br>
<a href="page.html#2">go to 2st slide of page.html</a><br>
<a href="page.html#3">go to 3st slide of page.html</a>
和您的page.html將看起來像->
<ul id="st-stack" class="st-stack-raw">
<li id = "1">
<div class="st-item"> <a href="http://drbl.in/fgQV"> <img src="images/fl1.jpg" /> </a> </div>
<div class="st-title">
image1
</div></li>
<li id=2><div class="st-item st-center"> <a href="http://drbl.in/fgQV"> <img src="images/fl2.jpg" /> </a> </div>
<div class="st-title">
image2
</div></li>
<li id = "3"><div class="st-item"> <a href="http://drbl.in/fgQV"> <img src="images/fl3.jpg" /> </a> </div>
<div class="st-title">
image3
</div></li>
</ul>
<script type=text/javascript>
//passing parameter from hash
var img2show = parseInt((location.hash || 5).split('#')[1]);
$( '#st-stack' ).stackslider({"current":img2show});
</script>
在到達最后一張幻燈片后如何使滑塊回到第一張幻燈片，反之亦然
[英]How can I make the slider go back to the first slide after reaching the last slide and vice versa
如何使菜單鏈接返回索引頁面並滑至特定高度？
[英]How do I make menu link go back to index page and slide to specific height?
從 slider 頁面調用 PHP 文件，如何返回活動幻燈片？
[英]Calling PHP file from a slider page, how do I return to the active slide?
如何在ipad上點擊將滑塊移至特定位置。 HTML Javascript
[英]How do I get slider to go to specific position on tap on ipad. HTML Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.