Question

我一直在追赶jQuery并搞乱，所以我在业余时间一直在研究书籍的滑块。我最近一直在使用页面跟踪问题。在单页面视图和双页面视图之间切换时，它不会保留您最后一页的页码。现在我把它设置为两个不同的变量，因为我将这个问题暂时搁置了一段时间，但是现在是时候解决它了。

所以在我尝试将它们设置为一个变量之前，它最终在一个页面视图上跳过页面。我做了一些搞砸，但老实说我真的很难理解如何使这项工作。

TL;博士

当单页在第3页时，第3页和第4页应显示在两页的视图中。

JSFIDDLE CODEPEN

HTML

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
        <div class="slider_wrapper">
          <div id="multi_slider">
            <div id="result"></div>
            <span class="nvgt" id="prevtwo"></span>
            <span class="nvgt" id="nexttwo"></span>
          </div>
          <div id="single_slider">
            <div id="result1"></div>
            <span class="nvgt" id="prevone"></span>
            <span class="nvgt" id="nextone"></span>
          </div>
        </div>
  </div>
    <div id="footer">
        <a href="#" id="prevonebot">Prev</a>
        <a href="#" id="prevtwobot">Prev</a>
        <a href="#" id="1page">1 Page</a></span>
        <a href="#" id="2page">2 Pages</a></span>
        <a href="#" id="nexttwobot">Next</a>
        <a href="#" id="nextonebot">Next</a>
    </div>
</body>
</html>

JQUERY

    $(document).ready(function () {

var twopage = 
        ['<img src="http://place-hold.it/256x512&text=page%201"><img src="http://place-hold.it/256x512&text=page%202">', 
        '<img src="http://place-hold.it/256x512&text=page%203"><img src="http://place-hold.it/256x512&text=page%204">',
        '<img src="http://place-hold.it/256x512&text=page%205"><img src="http://place-hold.it/256x512&text=page%206">',
        '<img src="http://place-hold.it/256x512&text=page%207"><img src="http://place-hold.it/256x512&text=page%208">']
var onepage = 
        ['<img src="http://place-hold.it/256x512&text=page%201">',
        '<img src="http://place-hold.it/256x512&text=page%202">', 
        '<img src="http://place-hold.it/256x512&text=page%203">', 
        '<img src="http://place-hold.it/256x512&text=page%204">',
        '<img src="http://place-hold.it/256x512&text=page%205">',
        '<img src="http://place-hold.it/256x512&text=page%206">',
        '<img src="http://place-hold.it/256x512&text=page%207">',
        '<img src="http://place-hold.it/256x512&text=page%208">',
        '<img src="http://place-hold.it/256x512&text=page%208">',
        '<img src="http://place-hold.it/256x512&text=page%208">']

counterOne = -1;
counterTwo = -1;

  function imgTransitionOne() {
        $('#result1').fadeOut(500, function() {
            $('#result1').html(onepage[counterOne]);
            $('#result1 > img').on('load', function() {
                $('#result1').fadeIn(500);
            });
        });
    };

    function next1(){
        counterOne = (counterOne + 1) % onepage.length;
        console.log(counterOne);
          imgTransitionOne();
    };

    next1();

    $('#nextone').click(next1);

    $('#prevone').click(function () {
    if(counterOne=='0'){
    counterOne= onepage.length;
    }
    counterOne = (counterOne - 1); 
    console.log(onepage[counterOne]); 
    imgTransitionOne();
    });

    //One Page Bottom

   function imgTransitionOne() {
        $('#result1').fadeOut(500, function() {
            $('#result1').html(onepage[counterOne]);
            $('#result1 > img').on('load', function() {
                $('#result1').fadeIn(500);
            });
        });
    };

    function next1(){
        counterOne = (counterOne + 1) % onepage.length;
        console.log(counterOne);
          imgTransitionOne();
    };

    $('#nextonebot').click(next1);

    $('#prevonebot').click(function () {
    if(counterOne=='0'){
    counterOne= onepage.length;
    }
    counterOne = (counterOne - 1); 
    console.log(onepage[counterOne]); 
    imgTransitionOne();
    });

//Two Pages
   function imgTransitionTwo() {
        $('#result').fadeOut(300, function() {
            $('#result').html(twopage[counterTwo]);
            $('#result > img').on('load', function() {
                $('#result').fadeIn(500);
            });
        });
    };

    function next2(){
        counterTwo = (counterTwo + 1) % twopage.length;
        console.log(counterTwo);
          imgTransitionTwo();
    };

    next2();

    $('#nexttwo').click(next2);

    $('#prevtwo').click(function () {
    if(counterTwo=='0'){
    counterTwo= twopage.length;
    }
    counterTwo = (counterTwo - 1); 
    console.log(twopage[counterTwo]); 
    imgTransitionTwo();
    });

    //Two Pages Bottom
   function imgTransitionTwo() {
        $('#result').fadeOut(300, function() {
            $('#result').html(twopage[counterTwo]);
            $('#result > img').on('load', function() {
                $('#result').fadeIn(500);
            });
        });
    };

    function next2(){
        counterTwo = (counterTwo + 1) % twopage.length;
        console.log(counterTwo);
          imgTransitionTwo();
    };



    $('#nexttwobot').click(next2);

    $('#prevtwobot').click(function () {
    if(counterTwo=='0'){
    counterTwo= twopage.length;
    }
    counterTwo = (counterTwo - 1); 
    console.log(twopage[counterTwo]); 
    imgTransitionTwo();
    });



  });
    $(document).ready(function() {


        $("#single_slider").hide();

        $("#s2fitone").hide();
        $("#s2heightone").hide();
        $("#nextonebot").hide();
        $("#prevonebot").hide();


            $("#1page").click(function() {
                $("#multi_slider").hide();
                $("#single_slider").show();
$("#result1").show();
                $("#result").hide();
                $("#s2fitone").show();
                $("#s2heightone").show();
                $("#s2fittwo").hide();
                $("#s2heighttwo").hide();
                $("#nexttwobot").hide();
                $("#prevtwobot").hide();                
                $("#nextonebot").show();
                $("#prevonebot").show();
            });
            $("#2page").click(function() {
                $("#multi_slider").show();
                $("#single_slider").hide();
$("#result").show();
                $("#result1").hide();
                $("#s2fitone").hide();
                $("#s2heightone").hide();
                $("#s2fittwo").show();
                $("#s2heighttwo").show();
                $("#nexttwobot").show();
                $("#prevtwobot").show();                
                $("#nextonebot").hide();
                $("#prevonebot").hide();

            });
    });

jQuery中两个数组之间的页面跟踪

0 个答案: