所以我的页面上有一个 Bootstrap 轮播,我正在尝试根据当前显示的幻灯片更改页面的内容。我在 javascript 变量中有当前幻灯片索引,但无法将值传输到 php。所以我现在使用 GET 获取值,但是除非我刷新页面,否则 php 变量的值不会改变,但是当我刷新页面时,幻灯片会重置为第一个。 即使在页面刷新后,如何让轮播保持在同一张幻灯片上?谢谢
这是我的旋转木马:
<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>
这是我的脚本:
function chooseit() {
var numbit = $('div.active').index() + 1;
history.pushState(null, null, '/work.php?id='+numbit);
}
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
itemWidth = carousel.find('li:first').width()+1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function(){
clickCount++;
//Animate the slider to left as item width
carousel.finish().animate({
left : '-='+itemWidth
},300, function(){
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
});
});
$('.btnPrevious').click(function(){
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth*clickCount);
//Animate the slider to right as item width
carousel.finish().animate({
left: '+='+itemWidth
},300);
});
function refreshChildPosition(){
carouselChild.each(function(){
$(this).css('left', itemWidth*carouselChild.index($(this)));
});
}
function refreshChildPositionNext(){
carouselChild.each(function(){
leftVal = parseInt($(this).css('left'));
});
}
});
提前致谢!
最佳答案
您可以将当前幻灯片编号存储为局部变量。
localStorage.setItem('slide', activeSlideNumber)
然后当文档加载时,检查存储中是否存在 slide 变量,如下所示。
$(function() {
var slide = localStorage.getItem('slide');
if (slide === null) {
// start from the top
} else {
// start from slide number in storage
}
});
关于javascript - 刷新后将轮播保持在同一张幻灯片上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45517863/