Добавление функций возврата и перемотки вперед в слайд-шоу
Я сделал слайд-шоу с php и javascript, и оно отлично скользит по изображениям, но я немного застрял в функциях назад и вперед, и я был бы признателен, если бы вы могли мне немного помочь здесь.Вот что я сделал до сих пор:
PHP:
$dir = 'images/slideshow';
$images = scandir($dir);
$i = 0;
echo '<div id="slideshow-wrapper">';
echo '<div id="slideshow-beta">';
foreach($images as $img){
if ($img != '.' && $img != '..') {
$i++;
echo '<img src="../images/slideshow/'.$img.'" class="img_'.$i.'">';
}
}
echo '</div>';
echo '<div id="slideshow-controller">';
echo '<div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);"></span></div>';
echo '<div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);"></span></div>';
echo '</div>';
echo '</div>';
Javascript:
var i=1;
var begin=true;
function SlideShow(x){
if(x==-1){
i--;
}else if(x==1){
i++;
}
var total=$('#slideshow-beta img').length;
for(var j=1;j<=total;j++){
if($('.img_'+j).css('display')!='none'){
begin=false;
break;
}else{
begin=true;
}
}
if(i>total){
i=1;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}else if(begin){
$('.img_'+i).show();
}else if(!begin){
$('.img_'+(i-1)).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}
setTimeout(function(){
i++;
SlideShow(x);
},5000);
}
HTML:
<body onload="SlideShow(false);">
Как вы можете видеть, я попытался создать событие onclick, чтобы изменить значение "i" при запуске, хотя значение изменено, изображение - нет. Может быть, потому, что нажатие назад/вперед вызывает другой экземпляр функции вместо ее перезаписи.Я не знаю наверняка, я теряюсь в этом вопросе.
Вот скрипка
5 answers
Я сделал капитальный ремонт, но идея осталась прежней (скрипка):
Изменения в CSS:
.left-arrow, .right-arrow {
cursor: pointer;
/** display: none **/
}
#slideshow-controller {
z-index: 2;
position: absolute;
/** added **/
opacity: 0;
transition: opacity 300ms ease-in;
/***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
opacity: 1;
}
Изменения в HTML (удален встроенный onClick):
<div class="left-arrow-div"><span class="left-arrow">Back</span>
</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>
</div>
Javascript:
var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;
/*** hide all images at the start ***/
images.each(function (index) {
$(this).css({
display: 'none'
});
});
/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
SlideShow(-1);
});
$('.right-arrow').click(function () {
SlideShow(1);
});
/*** Start the slideshow on 1st image ***/
SlideShow(0);
function SlideShow(x) {
if (isNaN(x)) { // throw error if x is not a number
throw new Error("x must be a number");
}
clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
var current = (total + i + x % total) % total; // get the current image index
$(images[i]).fadeOut(1000, function () { // fade out the previous
$(images[current]).fadeIn(1000); // fade in the current
});
i = current; // set i to be the current
timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
SlideShow(1);
}, 5000);
}
Я исправил ваши проблемы - основная проблема заключалась в том, что вы вызывали встроенную функцию, но в данный момент функция не существует (миллисекунды в загрузке страницы). Другим был ваш if (теперь с 3 =, который включает тип - потому что false, 0, -1 и так далее являются "одинаковыми". Единственная проблема сейчас заключается в том, что интервал длится бесконечно и может вызвать следующее изображение мгновенно после изменения вручную.
В заключение я рекомендую вам использовать библиотеку, такую как cycle2 или что-нибудь подобное этот.
Https://jsfiddle.net/Lroatbzg/15/
jQuery(window).on('load', function() {
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var total = $('#slideshow-beta img').length;
function SlideShow(x) {
if(x === -1) {
i--;
} else if(x === 1) {
i++;
}
if(i > total) {
i = 1;
}
$('#slideshow-beta img').hide();
$('#slideshow-beta .img_' + i).fadeIn(1000);
}
setInterval(function() {
i++;
SlideShow(i);
}, 5000);
jQuery('.left-arrow-div').on('click', function() {
SlideShow(-1);
});
jQuery('.right-arrow-div').on('click', function() {
SlideShow(1);
});
SlideShow(false);
});
Ваша скрипка выдает ReferenceError: SlideShow is not defined (Firefox использует Firebug).
Попробуйте заменить function SlideShow(x){...} на SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/).
Честно говоря, я не знаю, почему последнее работает, так как эти два утверждения эквивалентны мне (какое-либо объяснение этому?).
Объявление вашей функции наоборот избавляет от ошибки - по крайней мере, в моем браузере.
Использовать
if(x=='-1'){
i--;
}else if(x=='1'){
i++;
}
Вместо
if(x==-1){
i--;
}else if(x==1){
i++;
}
Проблема в том, что setTimeout выполнит функцию слайд-шоу с задержкой. Однако, когда вы нажимаете кнопку, это отложенное выполнение не останавливается. Чтобы остановить это выполнение, я внес небольшое изменение в код. Кроме того, я решил проблему ошибки ссылки в jsfiddle, запустив функцию ONCLICK через jQuery.
Этот результат можно проверить здесь: https://jsfiddle.net/Lroatbzg/13/
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter){
if(latest!=parameter)
return; //Return when this function is not called through the last click or timeout.
var total=$('#slideshow-beta img').length;
i=i+direction;
if(i>total)
i=1;
if(i<1)
i=total;
begin=true;
for(var j=1;j<=total;j++)
{
if($('.img_'+j).css('display')!='none')
{
begin=false;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+j).css('display','none');
$('.img_'+i).fadeIn(1000);
});
break;
}
}
if(begin)
$('.img_'+i).show();
setTimeout(function(){
SlideShow(parameter);
},5000);
}
SlideShow(latest);
$("#left").click(function(){ latest=Math.random(); direction=-1; SlideShow(latest); });
$("#right").click(function(){ latest=Math.random(); direction=1; SlideShow(latest); });
HTML изменен следующим образом:
<div id="slideshow-controller">
<div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
<div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>