Javascript 刷新后将转盘保持在同一张幻灯片上
因此,我的页面上有一个引导转盘,我试图根据当前显示的幻灯片更改页面内容。我在javascript变量中有当前幻灯片索引,但无法将该值传输到php。因此,我现在使用GET获取值,但是除非我刷新页面,否则php变量的值不会改变,但是当我刷新页面时,幻灯片会重置为第一个。 即使页面刷新后,如何让旋转木马仍停留在同一张幻灯片上?多谢各位 这是我的旋转木马:Javascript 刷新后将转盘保持在同一张幻灯片上,javascript,php,jquery,twitter-bootstrap,carousel,Javascript,Php,Jquery,Twitter Bootstrap,Carousel,因此,我的页面上有一个引导转盘,我试图根据当前显示的幻灯片更改页面内容。我在javascript变量中有当前幻灯片索引,但无法将该值传输到php。因此,我现在使用GET获取值,但是除非我刷新页面,否则php变量的值不会改变,但是当我刷新页面时,幻灯片会重置为第一个。 即使页面刷新后,如何让旋转木马仍停留在同一张幻灯片上?多谢各位 这是我的旋转木马: <div id="myCarousel" class="carousel slide" data-ride="carousel" data-
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/wisp.png" alt="WISP" style="width:100%;">
</div>
<div class="item">
<img src="images/linkme.png" alt="linkme" style="width:100%;">
</div>
<div class="item">
<img src="images/zainent.png" alt="zain" style="width:100%;">
</div>
<div class="item">
<img src="images/tahadi.png" alt="tahadi" style="width:100%;">
</div>
<div class="item">
<img src="images/onelife.png" alt="onelife" style="width:100%;">
</div>
<div class="item">
<img src="images/alavina.png" alt="alavina" style="width:100%;">
</div>
<div class="item">
<img src="images/iha.png" alt="iha" style="width:100%;">
</div>
<div class="item">
<img src="images/runnuts.png" alt="runnuts" style="width:100%;">
</div>
<div class="item">
<img src="images/oliviafred.png" alt="oliviafred" style="width:100%;">
</div>
<div class="item">
<img src="images/bandicoot.png" alt="bandicoot" style="width:100%;">
</div>
<div class="item">
<img src="images/bassama.png" alt="bassama" style="width:100%;">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="return chooseit()">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="return chooseit()">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
提前谢谢你 您可以将当前幻灯片编号存储为局部变量
localStorage.setItem('slide',activeSlideNumber)
然后,在加载文档时,检查存储中是否存在幻灯片变量,如下所示
$(function() {
var slide = localStorage.getItem('slide');
if (slide === null) {
// start from the top
} else {
// start from slide number in storage
}
});
这对我来说非常有效 你有机会试试这个吗?
$(function() {
var slide = localStorage.getItem('slide');
if (slide === null) {
// start from the top
} else {
// start from slide number in storage
}
});
$('#myCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#myCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#myCarousel").carousel(sessionStorage.lastSlide*1);
}