Question

下面是一个简单的脚本，用于浏览显示一组html框的数组。初始函数通过php回显来自mysql数据库的元素加载，然后将其放入jquery数组中。

next3功能完美无缺，但对于我的生活，我无法将它倒回到最后三个。

任何人都可以提供帮助......

function createTicker(){
 tickerItems = new Array();
 <?php
 for($i = 0; ($rs=mysql_fetch_array($detail4conferences)); $i++) {

  $confid = '<a href=\"../'.$rs['confid'].'\" class=\"forthcomingBox\">';

  if(!empty($rs['strapline'])){
   $strapline = '<span class=\"prefixPages\">'.$rs['strapline'].'</span><br />';
  } else {
   $strapline = '';
  }

  $title = '<span class=\"hpTitle\">'.$rs['title'].'</span><br/>';

  if(!empty($rs['subtitle'])){
  $subtitle = '<span class=\"subtitlePages\">'.$rs['subtitle'].'</span><br />';
  } else {
   $subtitle = '';
  }

  $dateline = '<span class=\"dateandlocationPages\">'.$rs['dateline'].'</span></a>';

  echo "tickerItems[$i] = '$confid$strapline$title$subtitle$dateline';";
  }
 ?>
 i = 0;
 tickerIt();
    }

    function next3(){
 if(i >= tickerItems.length){
  i = 0;
 } 

 $('#tickerHolder').fadeOut(300, function(){
  $('#ticker1').html(tickerItems[i]);
  $('#ticker2').html(tickerItems[i+1]);
  $('#ticker3').html(tickerItems[i+2]);
  $('#tickerHolder').fadeIn("slow");
  i = i + 2;
  i++;
 });
    }

我不知道下面要做什么 - 无论我尝试什么迭代，似乎没有什么能让我找到正确的最后三个......

function prev3(){
 if(i >= tickerItems.length){
  i = 0;
 }

 $('#tickerHolder').fadeOut(300, function(){
  $('#ticker1').html(tickerItems[i-4]);
  $('#ticker2').html(tickerItems[i-5]);
  $('#ticker3').html(tickerItems[i-6]);
  $('#tickerHolder').fadeIn("slow");
  i--;
 });
    }

Answer 1

试一试......

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
    <a class="prev">Prev</a>
    <a class="next">Next</a>
  </body>
  <script type="text/javascript">
    function showPage(pageNum, arr)
    {
      $(".container").fadeOut(300, function() {
        $(".line1").html("");
        $(".line2").html("");
        $(".line3").html("");

        i = (pageNum - 1) * 3;
        $(".line1").html(arr[i]);
        $(".line2").html(arr[i + 1]);
        $(".line3").html(arr[i + 2]);
        $(".container").fadeIn("slow");
      });
    }

    $(function() {

      var tickers = [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8"
      ];

      var numPages = Math.round(tickers.length / 3);
      var currentPage = 1;

      showPage(currentPage, tickers);

      $(".next").click(function() {
        if (currentPage + 1 > numPages) return;

        currentPage++;      
        showPage(currentPage, tickers);
      });

      $(".prev").click(function() {
        if (currentPage - 1 < 1) return;

        currentPage--;
        showPage(currentPage, tickers);
      });
    });
  </script>
</html>

在jquery中回放一系列元素

1 个答案: