Question

我想构建一个水平的图像行，可以使用固定的导航和jQuery滚动到图像，在图像的最右侧（末尾）有一个接触区域。我几乎就在那里，问题是，图像是动态引入的。所以我不知道它会在运行时有多宽。在下面的代码中，div sideways控制宽度，我将其设置为1000％仅用于测试目的。我希望能够计算出所有内容的宽度，然后将sideways设置为该数量。

以下是以下代码的演示：http://jsfiddle.net/Blender/feyzJ/

HTML：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<body>

<div class="nav">
    <a href="#home">home</a>
    <br>
    <a href="#contact">contact</a>
</div>

<div class="sideways">
    <div class="images">
        <div class="image">
            <img src="images/img1jpg"/>
        </div>
        <div class="image">
            <img src="images/img2.jpg"/>
        </div>
        <div class="image">
            <img src="images/img3.jpg"/>
        </div>
        <div class="image">
            <img src="images/img4.jpg"/>
        </div>
        <div class="image">
            <img src="images/if-black-could-shine.jpg"/>
        </div>
    </div>
    <div class="contact">
        CONTACT
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>

<script>
$(document).ready(function()
{
  $('a[href=#home]').click(function()
  {
    $('html, body').animate({scrollLeft:0}, 'slow');
    return false;
  });

  $('a[href=#contact]').click(function()
  {
    $('html, body').animate({scrollLeft:$(document).width()}, 'slow');
    return false;
  });
});
</script>

</body>
</html>

CSS：

body
{
background:#E8E8E6;
overflow-x: scroll; 
overflow-y: auto;
}

.nav
{
position:fixed;
padding-top:200px;
padding-left:20px;
padding-right:20px;
float: left;
}

.sideways
{
padding-top:20px;
padding-left:100px;
width:1000%;
height:100%;
}

.image
{
float: left;
padding-right:20px;
}

.contact
{
float: left;
padding-right:20px;
}

Answer 1

您可以等待加载所有图像，然后记录宽度：

var loaded = 0;
var paneWidth = 0;

$('.images img').load(function() {
  loaded++;

  if (loaded == $('img').length) {
    paneWidth = $('.images').width();
  }
});

带有动态内容的jquery水平幻灯片

1 个答案: