Thêm các chức năng quay lại và chuyển tiếp trong trình chiếu

Tôi đã tạo trình chiếu với php và javascript và trình chiếu hình ảnh tốt, nhưng tôi bị kẹt ở các chức năng quay lại và chuyển tiếp và tôi sẽ biết ơn nếu bạn có thể giúp tôi chút here.This là những gì tôi đã làm như vậy cho đến nay:Thêm các chức năng quay lại và chuyển tiếp trong trình chiếu

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);">

Như bạn có thể thấy tôi đã cố gắng tạo sự kiện onclick để thay đổi giá trị 'i' khi chạy, mặc dù giá trị được thay đổi, hình ảnh thì không. Có lẽ bởi vì nhấn lùi/chuyển tiếp cuộc gọi một ví dụ khác của chức năng thay vì ghi đè nó. Tôi không biết chắc chắn, tôi bị mất trên này.

Dưới đây là một fiddle

Nguồn

2015-09-10 Petru Lebada

nếu bạn chia sẻ mã của bạn trong jsfiddle mà không php, vấn đề sẽ sửa chữa một cách nhanh chóng –

TIP: thay thế mã mà 'nếu (bắt đầu == true) 'to' if (bắt đầu) ' –

cũng,' if (i == total + 1) {'to' if (i> total) {' –

Tôi đã thực hiện một sự thay đổi lớn, nhưng ý tưởng vẫn như cũ (fiddle):

Thay đổi 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; 
}

Thay đổi sang HTML (loại bỏ inline 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); 

}

Nguồn

2015-09-14 08:48:30

tuyệt vời alghoritm, '(tổng cộng + i + x% tổng)% tổng số', là chìa khóa để những gì tôi đang tìm kiếm, cảm ơn rất nhiều –

Chào mừng. Nó được làm bằng tay :-P –

fiddle bạn ném một ReferenceError: SlideShow is not defined (Firefox sử dụng Firebug).

Hãy thử thay thế function SlideShow(x){...} bằng SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/).

Thành thật mà nói, tôi không biết tại sao sau này lại hoạt động, vì hai câu lệnh này tương đương với tôi (bất kỳ lời giải thích nào về điều đó?).

Khai báo chức năng của bạn theo cách khác để loại bỏ lỗi - ít nhất là trong trình duyệt của tôi.

Nguồn

2015-09-14 07:25:50 PinkTurtle

cho đến bây giờ không ai phàn nàn về một vấn đề như thế này, tôi cũng không gặp lỗi này –

Mã của bạn có gặp lỗi hay sự kiện nhấp chuột của bạn không làm gì cả? Bạn đang sử dụng một trình gỡ lỗi (như firebug)? – PinkTurtle

mã của tôi đang hoạt động tốt, không có lỗi, tôi chỉ cần một số trợ giúp để thực hiện một số chức năng, đọc lại câu hỏi, vui lòng –

-1

Vấn đề là setTimeOut sẽ thực thi hàm SlideShow bị trì hoãn. Tuy nhiên, khi bạn nhấp vào một nút, việc thực thi bị trì hoãn này sẽ không bị dừng lại. Để dừng việc thực hiện này, tôi đã thực hiện một thay đổi nhỏ đối với mã. Hơn nữa, tôi đã giải quyết ReferenceError trong jsfiddle bằng cách khởi chạy chức năng onClick thông qua jQuery.

Kết quả này có thể được kiểm tra ở đây: 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 được thay đổi như sau:

<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>

Nguồn

2015-09-14 07:44:26 DaveG

Tôi đã cố định vấn đề của mình - vấn đề chính là bạn gọi hàm inline - nhưng chức năng không tồn tại tại thời điểm này (mili giây trong tải trang). Một trong những khác là của bạn nếu (bây giờ với 3 = bao gồm các loại - vì sai, 0, -1 và như vậy là "giống nhau". Vấn đề duy nhất bây giờ là khoảng thời gian chạy vô hạn và có thể gọi ngay lập tức hình ảnh tiếp theo sau khi thay đổi thủ công

Kết luận tôi khuyên bạn nên sử dụng thư viện như cycle2 hoặc bất kỳ thứ gì như thế này.

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); 
});

Nguồn

2015-09-14 08:07:12 Gummibeer

cảm ơn câu trả lời của bạn, nhưng tôi không muốn sử dụng bất kỳ thư viện nào, mã này được viết bởi tôi hoàn toàn, và tôi sẽ không giữ nó theo cách đó, mặc dù tôi cần một số trợ giúp ở đây ... –

Sau đó, tôi khuyên bạn nên viết một đối tượng, có thể là một phần mở rộng jQuery và thêm các chức năng như: "SlideShow.next()" và xử lý mọi thứ trong đối tượng này và không cho phép bất cứ ai thay đổi nội bộ của bạn. – Gummibeer

sử dụng

if(x=='-1'){ 
    i--; 
}else if(x=='1'){ 
    i++; 
}

thay vì

if(x==-1){ 
    i--; 
}else if(x==1){ 
    i++; 
}

Nguồn

2015-09-16 10:01:14

Thêm các chức năng quay lại và chuyển tiếp trong trình chiếu

Trả lời

Các vấn đề liên quan