水平幻灯片问题CSS

Question

请查看以下链接：

 http://ifelsebox.com/7/k2.php

在上面的链接中，代码工作正常。我有一个滑块，共有5张照片。滑块从第一张照片开始，然后单击箭头显示后续照片。

但是在以下链接中：

http://ifelsebox.com/7/k1.php

代码完全相同，除了我有两个类似的滑块。现在的问题是 - 我不确定为什么： 1.滑块以第5张图像开始 2.第5张图像出现两次。（点击箭头检查）。

我需要让所有多个滑块的行为与第一种情况完全相同。 i：每个滑块都应该以第一张图片开头，并且不应该重复（就像第五张图片在滑块中出现两次一样）。

下面是第一个案例的html：

<div class="photo-post">


                  <?php
                      $i=0;
                        $unique_seq="888094499";
                      $pic_counter=1;
                      foreach (glob("target/*".$unique_seq."*") as $filename) 
                      {
                         $i++;        
                      }
                      $total_pics=$i;
                      echo "<div class='post-photo-slider'>";
                      if($i>1)
                      {
                         echo "<a  href='#' id='".rand()."' class='control_next_photo'>></a>";
                         echo "<a  href='#' id='".rand()."' class='control_prev_photo'><</a>";
                      }
                      echo "<ul>";
                       foreach (glob("target/*".$unique_seq."*") as $filename) 
                      {
                         echo "<li>";
                         echo "<div class='photos-slide-container'>";
                         echo "<img src='".$filename."' width='500px' height='225px'>";
                         echo "<span class='count-span-photos'>".$pic_counter." of ".$total_pics."</span>";
                         echo "</div>";
                         echo "</li>";
                        $pic_counter++;   
                      }

                      if ($i==1)
                      {
                      echo "<li></li>";
                      }
                      echo "</ul>";  
                      echo "</div><!-- post-photo-slider END -->";
                      echo "<hr class='hr4'>";

                      ?>

            </div><!-- photo end -->

这是CSS：

 <style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  



 .post-photo-slider {
  position: relative;
  overflow: hidden;

  border-radius: 4px;
 }

 .post-photo-slider ul {
   position: relative;
   margin: 0;
   padding: 0;
   height: 200px;
  list-style: none;
 }

 .post-photo-slider ul li {
   position: relative;
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   width: 500px;
   height: 230px;


 }

 a.control_prev_photo,a.control_next_photo {
   position: absolute;
   top: 40%;
  z-index: 999;
   display: block;
   padding: 1% 1%;
  width: auto;
   height: auto;
   background: #2a2a2a;
   color: #fff;
   text-decoration: none;
    font-weight: 600;
   font-size: 18px;
  opacity: 0.5;
   cursor: pointer;
 }

 a.control_prev_photo:hover, a.control_next_photo:hover {
   opacity: 0.5;
   -webkit-transition: all 0.2s ease;
 }

 a.control_prev_photo {
   border-radius: 0 2px 2px 0;
 } 

 a.control_next_photo {
   right: 0;
   border-radius: 2px 0 0 2px;
 }







 .photo-post{}
 .h4-1{margin:0;padding-top:8px;padding-left:10px;padding-    right:10px;padding-bottom:3px;display:block;font-size:80%;font-family: Arial,    'Helvetica Neue', Helvetica, sans-serif;text-align:justify;}
 .post-photo-slider{}
 .control_next_photo{}
 .control_prev_photo
 .photos-slide-container{text-align:center;padding:10px;position:relative}
 .count-span-photos{position:absolute;right:20px;bottom:15px;font-    size:250%;color:red}
 .hr4{margin:0;padding:0;border-color:#FAFAFA;}



 </style>

这是js：

    jQuery(document).ready(function ($) {



var slideCount = $('.post-photo-slider ul li').length;
var slideWidth = $('.post-photo-slider ul li').width();
var slideHeight = $('.post-photo-slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('.post-photo-slider').css({ width: slideWidth, height: slideHeight });

 $('.post-photo-slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

     $('.post-photo-slider ul li:last-child').prependTo('.post-photo-slider ul');

function moveLeft(element) {
  var ulEle = element.find('ul');
  ulEle.animate({
    left: + slideWidth
  }, 200, function () {
    ulEle.find('li:last-child').prependTo(ulEle);
    ulEle.css('left', '');
  });
};

    function moveRight_old(a) {
      alert('#'+a+' ul');
      $('#'+a+' ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#post-photo-slider ul li:first-child').appendTo('#post-photo-slider ul');
        $('#post-photo-slider ul').css('left', '');
        });
    };

function moveRight(element) {
  var ulEle = element.find('ul');
  ulEle.animate({
    left: - slideWidth
  }, 200, function () {
   ulEle.find('li:first-child').appendTo(ulEle);
   ulEle.css('left', '');
  });
};






$('a.control_prev_photo').click(function (e) {
   e.preventDefault();
  moveLeft($(e.target).closest('div.post-photo-slider'));
  });

$('a.control_next_photo').click(function (e) {
e.preventDefault();
moveRight($(e.target).closest('div.post-photo-slider'));
  });


});