Question

我正在使用php来显示一个简单的图库。一次显示一个图像，并使用上一个/下一个按钮来浏览图像阵列。该阵列也意味着继续循环。

我的previousImage（）函数按预期工作并将循环返回数组，但是我的nextImage（）函数跳过数组中的某些图像/继续产生问题。关于它有什么问题的任何建议？

相关代码：

<?php
  //total array size
  $total = sizeof($images)-1;

  //current position in the array      
  $k = 0;                      

  //displays the current image
  if(isset($_GET['pid'])){
      $k = $_GET['pid'];
      echo $images[$k]; 
    }

  //displays left and right navigation buttons which execute prev/nextImage functions
  echo '<br><a href="index.php?pid='.prevImage().'">', $button_left, "</a>";
  echo '<a href="index.php?pid='.nextImage().'">', $button_right, "</a>";

    function prevImage() {
      global $k;
      global $total;
      $k = (($k-1) < 0) ? $total : $k -1;
      echo $k;
      return $k;
    }

    function nextImage() {
      global $k;                 
      global $total;
      $k = ($k+1) % $total+1;
      return $k;     
    }
?>

Answer 1

步骤1.制作HTML文件并为Image SlideShow定义标记

我们创建一个HTML文件并使用名称slideshow.html

保存

<html>    
  <head>
     <link rel="stylesheet" type="text/css" href="slideshow_style.css">
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript" src="slideshow_effect.js"></script>
  </head>
  <body>
     <center>


     <div id="slide_cont">
         <img src="images/image1.jpg" id="slideshow_image">
     </div>
     <input type="image" id="prev_image" src="images/previous.png" >
     <input type="image" id="next_image" src="images/next.png" >
     <input type="hidden" id="img_no" value="0">

  </center>


</body> </html>

步骤2.制作CSS文件并为Image SlideShow定义样式

现在我们为Image SlideShow定义样式并保存文件名slideshow_style.css

#slide_cont
     {
     box-shadow:0px 0px 10px 0px silver;
     width:600px;    
     height:400px;
     margin-top:100px; 
      }
#slideshow_image 
      {
     width:600px;
     height:400px;
      }
#prev_image,#next_image 
      {
    width:40px; 
    height:40px;
      }

步骤3.制作脚本文件并为图像幻灯片定义效果

在此我们使用jQuery为我们的SlideShow定义效果并保存它名称为slideshow_effect.js。您可以从此站点下载jQuery

$(document).ready(function()
     {

    $( "#prev_image" ).click(function()
     {
       prev();
    }
    );
    $( "#next_image" ).click(function()
    {
       next();
    }
    );
}

）;

// Write all the names of images in slideshow 
var images = [ "image1", "image2" , "image3" , "image4" ];

function prev() 
   {    
    $( '#slideshow_image' ).fadeOut(300,function()   
        {
       var prev_val = document.getElementById( "img_no" ).value;
       var prev_val = Number(prev_val) - 1;
       if(prev_val< = -1)
       {
          prev_val = images.length - 1;
       }
       $( '#slideshow_image' ).attr( 'src' , 'images/'+images[prev_val]+'.jpg' );
       document.getElementById( "img_no" ).value = prev_val;    
     }
     );    
     $( '#slideshow_image' ).fadeIn(1000); 
     }

function next() 
    {
    $( '#slideshow_image' ).fadeOut(300,function()
        {
        var next_val = document.getElementById( "img_no" ).value;
        var next_val = Number(next_val)+1;
        if(next_val >= images.length)
        {
          next_val = 0;
        }
        $( '#slideshow_image' ).attr( 'src' , 'images/'+images[next_val]+'.jpg' );
        document.getElementById( "img_no" ).value = next_val;
    }
    );
    $( '#slideshow_image' ).fadeIn(1000); 
 }

Answer 2

这就是你需要的：一个基于方向返回上一个或下一个索引的函数（-1：previous，1：next）

echo '<br><a href="index.php?pid='.prevNext($k, $total, -1).'">', $button_left, "</a>";
echo '    <a href="index.php?pid='.prevNext($k, $total, 1).'">', $button_right, "</a>";

function prevNext($k, $t, $d) {
    return ($r=($k+$d)%$t)>=0?$r:$r+=$t;
}

PHP的“下一个图像按钮”用于简单的图库

2 个答案: