Ajax for slideshow not working

Question

我似乎並不完全明白這是如何工作的。當我調用get ajax方法時，不應該改變索引，因此幻燈片應該改變，或者我沒有得到這方面的信息。

PHP/HTML

echo "<div id='slider'> 
     <ul class='slides'> 

      <li class='slide'> 
       <div class='pic'> 
        <img src= " . $dir . $pic_array[$index] . " /> 
       </div> 
       <div class='caption'> 
        <p id='title'>$titles[$index]</p> 
        <p id='des'>$descriptions[$index]</p> 
       </div> 
       <div class='next'> 
        <i class='fa fa-arrow-right fa-2x'></i> 
       </div>  
       <div class='previous'> 
        <i class='fa fa-arrow-left fa-2x'></i> 
       </div> 
      </li>"; 

echo  "</ul> 
     </div> 


     </html>"; 

$conn->close(); 

?> 

的Javascript

$(function() { 
    var arrPix = $('#json_pics').val(); 
    var arrPix = $.parseJSON(arrPix); 


    var index = 0; 

    var $slider = $('#slider'); 
    var $slides = $slider.find('.slides'); 
    var $slide = $slides.find('.slide'); 
    var $next = $slides.find('.next'); 
    var $previous = $slides.find('.previous'); 
    var $caption = $slides.find('.caption'); 

    var slide_length = $slide.length; 

    $slider.hover(function() { 
      $caption.css('opacity', '1'); 
      $next.css('opacity', '1'); 
      $previous.css('opacity', '1'); 
     }, function() { 
      $caption.css('opacity', '0'); 
      $next.css('opacity', '0'); 
      $previous.css('opacity', '0'); 
     } 
    ); 
    $next.click(function() { 
     index++; 
     $.get("gallery_.php?index=" + index); 

    }); 
}); 

編輯：我應該使用負荷呢？

Answer 1

在努力讓你的解決方案

• 使用Ajax
• 和使用PHP，

我建議像下面這樣。

'getpic.php'

摘要：（。新文件...用於簡化得到一個新的一幅畫面的過程）

說明：包含一個功能，爲您的圖庫中的下一張圖像生成<img>標籤和相關信息。

$dir = /*whatever it is*/; 
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/); 
$descriptions = /*whatever they are*/; 
$titles = /*whatever they're supposed to be*/; 

function priWrap($index) { 
    /* 
    This handles the actual generating of the <img> tag as well as 
    the caption and such. 
    $index refers to a specific picture in $pix_array. 
    */ 

    global $pix_array, $dir, $titles, $descriptions; 

    $arr_len = count($pix_array); 

    if ($index < 0) { 
     $index = $arr_len-1; 
     } 
    else if { $index >= $arr_len) { 
     $index = 0; 
     } 

    echo "<div class='pic'> 
       <img src='" . $dir . $pic_array[$index] . "' data-ind='$index' /> 
      </div> 
    <div class='caption'> 
      <p id='title'>" . $titles[$index] . "</p> 
      <p id='des'>" . $descriptions[$index] . "</p> 
     </div>"; 
    } 

#let's get it set up to handle AJAX calls 
if (isset($_GET['index'])) { 
    $index = intval($_GET['index']); 
    priWrap($index); 
    } 

---

更改爲 'gallery_.php'

你貼現在看起來應該是這樣的代碼：

require_once('getpic.php'); 

echo "<div id='slider'> 
    <ul class='slides'> 

     <li class='slide'> 
      <div id='picWrapper'>"; 

echo priWrap($index) . " 
      </div><!--End #picWrapper--> 
      <div class='next'> 
       <i class='fa fa-arrow-right fa-2x'></i> 
      </div>  
      <div class='previous'> 
       <i class='fa fa-arrow-left fa-2x'></i> 
      </div> 
     </li>"; 

echo "</ul> 
    </div> 
    </body> 
    </html>"; 

$conn->close(); 

?> 

---

你JA vascript也需要改變。

var index = 0; 

應該

var index = parseInt($(".pic img").attr("data-ind")); 

和

$next.click(function() { 
    index++; 
    $.get("gallery_.php?index=" + index); 

}); 

應該

$next.click(function() { 
    index++; 
    $("#picWrapper").load("getpic.php?index=" + index, 
     /*Add callback so that index is updated properly.*/ 
     function() { 
      //update our index 
      index = parseInt($(".pic img").attr("data-ind")); 
      //show our caption stuff... 
      $(".caption").css('opacity', '1'); 
      } 
     ); 

}); 

---