Question

我是JavaScript的新手，所以请耐心等待。我正在尝试创建一个下一个和上一个箭头导航，它将循环通过一组网页，但我错过了一段关键代码，可以跟踪我所在的网页，以便确定顺序。非常感谢任何帮助！

这是我到目前为止编写的脚本：

"use strict";
var myPage = [];
myPage[0] = "apples";
myPage[1] = "oranges";
myPage[2] = "bananas";
myPage[3] = "kiwi";

var myPageSrc = "file:///D:site/fruit/";

var myPageEnd = ".html";

var i = 0;

function loadPage(){
  window.location.assign(myPageSrc + myPage[i] + myPageEnd);
}

function prev(){
  if (i <= 0) {
    i = myPage.length;
    loadPage();
  } else {
    i = i - 1;
    loadPage();
  }
}

function next(){
  i = i + 1;
  if (i >= myPage.length) {
    i = 0;
    loadPage();
  } else {
    loadPage();
  }
}

这是我的HTML：

<div class = "col-md-2"> 
<a href="" class="nav-prev floatleft" original-title="Previous" onClick="prev();return   false;"> <img src="../img/left.png"> </a>
<a href="" class="nav-prev floatright" original-title="Next" onClick="next();return false;"> <img src="../img/next.png"> </a>
</div>
<script src="../js/nextprevnav.js"></script>

Answer 1

我不确定是否可以使用HTML执行此操作？

有两个选项：使用iFrame或设置Cookie。

离开页面后，您还丢失了所有变量。一旦用户离开并返回，您将使用cookie来跟踪数据。既然你说你正在学习Javascript，我建议使用iFrame。在网页中设置iframe：

<iframe src="http://www.google-or-something.com" id="frame" width="100%" height="100%"></iframe>

然后你有window.location.assign函数，用以下代码替换它：

document.getElementById('frame').src = myPageSrc + myPage[i] + myPageEnd;

希望这能帮到你的路！

Answer 2

将变量i初始化为：

var i = myPage.indexOf(window.location.href.match(/.*\/([\.]+)\..*/)[1]);

Answer 3

我不会从头开始编写代码。你可以使用jQuery mobile和分页插件。如果你不喜欢jQuery移动样式，你也可以只使用框架进行分页并自己做样式。

请在下方plunker找到演示。

它的工作非常好，只是可以改善分页箭头的位置。

此外，html5历史记录正在使用jQuery mobile，而且还没有在您的代码中。

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/filamentgroup/jqm-pagination/master/jquery.mobile.pagination.css"/>
    
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdn.rawgit.com/filamentgroup/jqm-pagination/master/jquery.mobile.pagination.js"></script>
  </head>

  <body>
    <div data-role="page" id="index">
      <div data-role="header"><h1>Main page</h1></div>
      <div data-role="content" class="fullHeight">
        <p>Main page content...</p>
        <img src="http://lorempixel.com/300/200/" />
        <ul data-role="pagination">
        <!--<li class="ui-pagination-prev"><a href="3.html">Prev</a></li>-->
        <li class="ui-pagination-next"><a href="#page1">Next</a></li>
        </ul>
      </div>
      <div data-role="footer"><p>Footer &copy; 2014</p></div>
    </div>
    
    <div data-role="page" id="page1">
      <div data-role="header"><h1>Page 1</h1></div>
      <div data-role="content" class="fullHeight">
      <p>Page 1 content</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
        
        <ul data-role="pagination">
        <li class="ui-pagination-prev"><a href="#index">Prev</a></li>
        <li class="ui-pagination-next"><a href="#page2">Next</a></li>
      </ul>
      </div>
      <div data-role="footer" data-position="fixed"><p>Footer &copy; 2014</p></div>
      
    </div>
    
     <div data-role="page" id="page2">
      <div data-role="header"><h1>Page 2</h1></div>
      <div data-role="content" class="fullHeight">
      <p>Page 2 content</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>

        <ul data-role="pagination">
        <li class="ui-pagination-prev"><a href="#page1">Prev</a></li>
        <li class="ui-pagination-next"><a href="#page3">Next</a></li>
      </ul>
        
      </div>
      <div data-role="footer" data-position="fixed"><p>Footer &copy; 2014</p></div>
      
    </div>
    
    <div data-role="page" id="page3">
      <div data-role="header"><h1>Page 3</h1></div>
      <div data-role="content" class="fullHeight">
      <p>Page3 content</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>

        <ul data-role="pagination">
        <li class="ui-pagination-prev"><a href="#page2">Prev</a></li>
        <li class="ui-pagination-next"><a href="#page1">Next</a></li>
      </ul>
      </div>
      <div data-role="footer" data-position="fixed"><p>Footer &copy; 2014</p></div>
      
    </div>
  </body>

</html>

Answer 4

<script type="text/javascript">
        var current = 1;
        function moveImage(direction) {
            //alert(direction);
            if (direction == "left") {
                current--;
                if (current == 0)
                    current = 26;
                //alert(current);
            loadImage( current );
        } else {
                current++;
                if (current > 26)
                    current = 1;
                //alert(current);
            loadImage(current);
           }  
        }

        function loadImage( id ) {
         var image = document.getElementById("1");
         image.setAttribute('src', 'images/' + id + '.jpg');
         current = id;
         //alert(id + '.jpg');
        }
    </script>
    <form id="form1" runat="server">
        <div id="fotoblock" align="center">
            <img src="images/1.jpg" id="1" style="width:850px; height:423px" />
        </div>
        <div class="nav-icons" style="text-align:center">
            <a href="#" class="prev_image" title="Previous Image" onclick="moveImage('left')" style="text-decoration:none; font-weight:bold"><<</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" class="next_image" title="Next Image" onclick="moveImage('right')" style="text-decoration:none;font-weight:bold">>></a></div>
    </form>

使用JavaScript浏览Web URL的下一个和上一个箭头按钮

4 个答案: