Question

我一直在阅读本网站上有关如何进行上一页/下一页导航的一些文章，但我似乎找不到一个可以很好地使用我的代码设置方式的文章。如果您想要查看实时网站以供参考，请点击here。

HTML

<div id="arrow-nav" class="container-full clearfix">
   <div class="container">
      <a class="prev sm-title" href="#"><i class="fa fa-long-arrow-left"></i> Previous Project<span>Project Title</span></a>
      <a class="next sm-title" href="#"><span>Project Title</span>Next Story <i class="fa fa-long-arrow-right"></i></a>
   </div>
</div><!--end arrow nav-->

<div id="portfolio">
   <div class="portfolio-container group">

   <div class="articles">
      <article class="mix web col-6" data-myorder="1">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-1" id="project_1"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-1"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>

      <article class="mix web col-6" data-myorder="2">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-2" id="project_2"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-2"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>
   </div>
   </div>
</div>

的Javascript 这就是我为每个项目创建内容的方式：

var projects = {
        'project-1' : {
            'title' : 'Project Name',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/path/file-1.jpg'
            ],
            'tags': [
                'Lorem Ipsum 1',
                'Lorem Ipsum 2'
            ]
        },
        'project-2' : {
            'title' : 'Project Name',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/path/file-1.jpg'
            ],
            'tags': [
                'Lorem Ipsum 1',
                'Lorem Ipsum 2'
            ]
        }
}

这是我如何提取数据并将其吐出到div中的示例：

$('#project-title').html(projectData.title);
$('#project-description').html(projectData.description);

这就是我#arrow-nav出现的方式：

$('[data-type="projectLoader"]').click(function() {
        var proj = $(this)[0].getAttribute('data-project');
        $('#arrow-nav').addClass('slideIn');

        updateHash(proj);
        return false;
});

$('[data-type="projectDie"]').click(function() {
        $('body').removeClass('projectLoaded');
        $('#arrow-nav').removeClass('slideIn');
        return false;
});

$( 'document' ).ready(function() {
        if ($('body').hasClass('projectLoaded')) {
            $('#arrow-nav').addClass('slideIn');
        } else {
            $('#arrow-nav').removeClass('slideIn');
        }
});

要接受很多代码。基本上我想要实现的是，当我将鼠标悬停在上一个或下一个上面时，我有<span>我希望保留上一个或下一个项目名称in。上一个/下一个将获取data-myorder="x";或从var projects获取上一个/下一个项目。

单击项目时的交互，这是使其向上滑动的css：

#project {
    position:fixed;
    left:0;
    width:100%;
    height:100%;

    opacity:0;
    top:100%;
    background: #efefed;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
body.projectLoaded {
    overflow: hidden;
}
body.projectLoaded #project {
    opacity:1;
    top:0;
}

如果我单击“上一步”按钮，它会从左边开始：100％;左：0，反之亦然，但如果必须保持不变，我可以忍受。我试着看一些例子来看看它是否足够简单来交换周围的东西，我尝试了一些代码示例，但我不知道我在做什么，所以我不打算在这里发布任何代码，已经很多了。有关我想要实现的目标的视觉概念，请单击here并单击项目。

Answer 1

如果您只想让事物从左向右滑动，根据您的方向，您需要三种不同的状态：左/右/活动

您可以创建一个div来保存您的下一个/上一个状态，以便您可以在活动状态滑落时滑入它们。

在进行任何幻灯片播放之前，您需要更新幻灯片中的信息。

您知道哪个项目处于活动状态，因此您知道该去哪里。

我会将您的JS对象更改为：

var projects = [
    {
            'id': 1,
        'title' : 'Project Name',
        'description' : 'Lorem Ipsum',
        'images': [
            '/images/path/file-1.jpg'
        ],
        'tags': [
            'Lorem Ipsum 1',
            'Lorem Ipsum 2'
        ]
    },
    {
            'id': 2,
        'title' : 'Project Name',
        'description' : 'Lorem Ipsum',
        'images': [
            '/images/path/file-1.jpg'
        ],
        'tags': [
            'Lorem Ipsum 1',
            'Lorem Ipsum 2'
        ]
    }
 ];

 console.log(projects[0].tags); // ["Lorem Ipsum 1", "Lorem Ipsum 2"]

现在您可以使用数组的索引或ID。

对于动画，这里是Fiddle

编辑： This Fiddle更好地说明了我的观点

Answer 2

您可以通过一些小的jquery代码更改可见文章，而无需更改其他功能。

这个例子可以帮到你。

我没有更改你的html ID，所以你只需要复制jquery代码并享受它;）

＆＃13;

$(document).ready(function(){
  $('.articles').children().not(':first').hide();
  $('.prev').hide();
  
  $('.articles').on('next', function(){
  	var current = $('.articles article:visible'),
  	current_index = current.data('myorder'),
    count = $('.articles article').length;
    if (current_index < count)
    {
    	if(current_index == 1)
      	$('.prev').show();
    	if(current_index == count - 1)
      	$('.next').hide();
    	current.hide();
      current.next().show();
    }
  });
  
  $('.articles').on('prev', function(){
  	var current = $('.articles article:visible'),
  	current_index = current.data('myorder'),
    count = $('.articles article').length;
    if (current_index > 1)
    {
    	if(current_index == count)
      	$('.next').show();
    	if(current_index == 2)
      	$('.prev').hide();
    	current.hide();
      current.prev().show();
    }
  });
  
  $('.next').on('click', function(){
  	$('.articles').trigger('next');
    return false;
  });
  $('.prev').on('click', function(){
  	$('.articles').trigger('prev');
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="arrow-nav" class="container-full clearfix">
  <div class="container">
    <a class="prev sm-title" href="#"><i class="fa fa-long-arrow-left"></i> Previous Project<span>Project Title</span></a>
    <a class="next sm-title" href="#"><span>Project Title</span>Next Story <i class="fa fa-long-arrow-right"></i></a>
  </div>
</div>
<!--end arrow nav-->

<div id="portfolio">
  <div class="portfolio-container group">

    <div class="articles">
      <article class="mix web col-6" data-myorder="1">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-1" id="project_1"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-1"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>

      <article class="mix web col-6" data-myorder="2">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-2" id="project_2"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-2"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>
      
      <article class="mix web col-6" data-myorder="3">
        <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-3" id="project_3"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-2"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>
    </div>
  </div>
</div>

＆＃13;

从var

获取最新文章

当您从projects var获取projectData时，您应该获得项目的索引，并在绘制项目时通过此代码将其保存在#project-container html数据中：

$('#project-container').data('index', n);

然后你可以使用这段代码：

$(document).ready(function(){      
  $('.articles').on('next', function(){
    var current_index = $('#project-container').data('index'),
    count = projects.length;
    if (current_index < count)
    {
      projectData = projects[current_index+1];

      /* now update #project-container with your functions */
    }
  });

  $('.articles').on('prev', function(){
    var current_index = $('#project-container').data('index'),
    count = projects.length;
    if (current_index > 1)
    {  
      projectData = projects[current_index-1];

      /* now update #project-container with your functions */
    }
  });

  $('.next').on('click', function(){
    $('.articles').trigger('next');
    return false;
  });
  $('.prev').on('click', function(){
    $('.articles').trigger('prev');
    return false;
  });
});

注1：从1开始索引。

注意2：使用项目容器抽屉功能在下面的代码中更新#project-container。

无法弄清楚使Prev / Next按钮工作所需的javascript

2 个答案: