j查询4个方向的全屏幻灯片

Question

简单的问题，但答案可能更难。我无法计算出对这个 http://www.socketstudios.com/网站的影响。它是基本响应和全屏演示。有 scrollTo 插件，它不再可用，所以我正在寻找替代方案，因为我不确定它是否是导致效果的原因，即使是，如果你需要更多的插件。

Answer 1

为了调整图像的大小，他们使用侦听resize事件的脚本。

$(window).resize(function() {             
var top_target = '#work'+current_section;
var $main = $('#main');
$main.scrollTo(top_target);
var i=0;
    for (i=0;i<=15;i++)
    {
  var $container = $('#work'+i);
  var left_target = '#workcontent1';
  $container.scrollTo(left_target);
    }

var left_target = '#workcontent'+current_image;
var $work_container = $('#work'+current_section);
$work_container.scrollTo(left_target);
// Get Window Size
var myWidth = 0, myHeight = 0;
myWidth = $(window).width();
myHeight = $(window).height();
if(myHeight >= 900){
    image_height = 900;
    image_width = 1350;
}
else{
    image_height = myHeight;
    image_width = image_height * 1.5;
}
 // Set Image Offset
var $imgcont = $('.imgcontainer');
$imgcont.css('width', +image_width);
    $imgcont.css('margin-top', +image_height / -2 + "px");
$imgcont.css('margin-left', +image_width / -2 + "px");
 });

Answer 2

你可以是一个忍者，使用循环插件，然后使用向上、向下、向左右滚动，div 的大小与页面的大小和按钮位于固定位置。 这需要一个jQuery库。

http://jquery.malsup.com/cycle/int2.html

很酷的主意！ :D所以正常的上下滚动，每个上下都有一个上一个和下一个，但正如我所说，你肯定必须是一个忍者。