Rewind through an array of elements in jquery_问答_开发者

Rewind through an array of elements in jquery

开发者 https://www.devze.com 2023-02-03 16:31 出处：网络

Heres a simple script im usi开发者_如何学编程ng to go through an array displaying a set of html boxes. The initial function echoes a load of elements from a mysql database via php which is then put in

The next3 function works perfectly but for the life of me I cant rewind it to the last three.

Can any one help...

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

I have no idea what to do below - nothing seems to land me on the correct last three no matter what iteration I try...

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

Give this a try...

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