Question

我正在制作类似于www.yesstudio.co.uk的导航。向下滚动页面时，固定位置图像会更改以显示其中一个图像。

这是我的例子，工作正常。香港专业教育学院制作的图像将隐藏半透明，以便您可以看到最新情况。 http://smartpeopletalkfast.co.uk/demo/12.html

问题是交换图像的javascript手动重复所需的8次。我也在图像的src中进行了硬编码以进行更改。我将在CMS中使用此代码，因此我需要一个更智能的解决方案，从页面获取图像的src，并且还可以处理超过8个图像。

$(window).bind("load scroll", function() {  

            // get the height of the page
            var bodyHeight = $('body').height();        

            //get the current scroll position
            var scrollPos = $(window).scrollTop();

            //get the height of the viewport 
            var viewportHeight = $(window).height();    

            //get the number of images in the list
            var numberImages = $("#image-list img").size(); 

            //the amount needed to scroll for each image is the page height minus the viewport height, 
            var scrollInterval = ( (bodyHeight - viewportHeight) / (numberImages) ); 


            //for each scroll intervall assign the correct image. 
            if (scrollPos < scrollInterval) {
                $('#img-main').attr('src', 'images/1.jpg');
            }
            if (scrollPos > scrollInterval && scrollPos < (scrollInterval*2) )  {   
                $('#img-main').attr('src', 'images/2.jpg');
            }
            if (scrollPos > (scrollInterval*2) && scrollPos < (scrollInterval*3) )  {
                $('#img-main').attr('src', 'images/3.jpg');
            }
            if (scrollPos > (scrollInterval*3) && scrollPos < (scrollInterval*4) )  {
                $('#img-main').attr('src', 'images/4.jpg');
            }
            if (scrollPos > (scrollInterval*4) && scrollPos < (scrollInterval*5) )  {
                $('#img-main').attr('src', 'images/5.jpg');
            }
            if (scrollPos > (scrollInterval*5) && scrollPos < (scrollInterval*6) )  {
                $('#img-main').attr('src', 'images/6.jpg');
            }
            if (scrollPos > (scrollInterval*6) && scrollPos < (scrollInterval*7) )  {
                $('#img-main').attr('src', 'images/7.jpg');
            }
            if (scrollPos > (scrollInterval*7) && scrollPos < (scrollInterval*8) )  {
                $('#img-main').attr('src', 'images/8.jpg');
            }               

        });

更新 - 有人可以告诉我我应该做些什么来解决这个问题吗？我不知道从哪里开始。谢谢

UPDATE - 文件名不一定是整齐的1.jpg。 2.jpg等等。它们可以是任何东西。

Answer 1

$('#img-main').attr('src', 'images/' + (scrollPos / scrollInterval).toString() + '.jpg');

Answer 2

var defaultFile = 'someDefualtFile.fl'; 
var fileNames = (
    'images/thisIsTheFirstFile.jpg',
    'images/thisIsNotAFile.png',
    'images/testTest.test'
    ...
    ...
    ...
);

var index = Math.floor($(window).scrollTop() / scrollInterval );
var file = fileNames[index] || defaultFile;
$('#img-main').attr('src', file);

如何使此代码动态化并使用CMS（非静态内容）？

2 个答案: