使用javascript动态链接html页面

Question

这是为HTML页面存储五个图像的代码 然后使用该功能 一次显示一个五个图像。

此代码有效，可以滚动浏览五张图片。

我的问题是，是否可以根据特定时间显示的图片指向不同的HTML页面

<script type="text/javascript">
    var curImage = 0;
    var cImages = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];

    function townHousePics(direction) {
        if (direction == 'next') {
            curImage++;
            if (curImage == 5) {
                curImage = 0;
            }        
        } 
        else 
        {
            curImage--;
            // even reset the counter here when
            // its getting 0
        }
        document.images[0].src = cImages[curImage];
    }
</script>

Answer 1

html setup

<a href='' id='my-anchor-name'><img id='my-image-name' src=''/></a>

的javascript

<script type="text/javascript">
    var curImage = 0;
    var cImages = [{aHref:'target1.html',imgHref:'1.jpg'},{aHref:'target2.html',imgHref:'2.jpg'},
{aHref:'target3.html',imgHref:'3.jpg'},
{aHref:'target4.html',imgHref:'4.jpg'},
{aHref:'target5.html',imgHref:'5.jpg'}
];
         function townHousePics(direction) {
                     if (direction == 'next') {
                         curImage = (curImage++)%cImages.length ;
                      else {
                         curimage = (curImage--)%cImages.length;
                     }
                     var img = document.getElementById('my-image-name');
                     var anchor = document.getElementById('my-anchor-name')
                     img.src = cImages[curImage].imgHref;
                     anchor.href = cImage[curImage].aHref;
             }
</script>

Answer 2

自动基于文件名的替换

假设您有以下链接：

<a href="1.html" id="viewLarge">View Large</a>

您希望随每张图片动态更改。当图像2.jpg成为主要内容时，我们将1.html换成2.html。我们可以将代码的最后一行修改为：

// Updated Source of First Image
document.images[0].src = cImages[curImage];
// Parse Image Number from String
var currentNumber = parseInt( curImage, 10 ); // 2.jpg becomes 2
// Get a reference to our 'viewLarge' link
var ourLink = document.getElementById("viewLarge");
// 1.html becomes 2.html when 2 is the currentNumber;
ourLink.href = ourLink.href.replace( /^([0-9]+)/, currentNumber );

请注意，虽然这有效，但它会限制您为1.html设置1.jpg。这可能是不合需要的。您可能希望1.jpg与CityLoft.html一起使用。如果是这种情况，您需要将图像与cImages对象中的正确网址相关联：

使用对象存储相关数据

var cImages = [{image: '1.jpg', page: 'cityLoft.html'},
               {image: '2.jpg', page: 'townhome.html'}];

完成此更改后，您只需要恢复代码中的引用。例如，我们将更改以下内容：

document.images[0].src = cImages[curImage];

对此：

document.images[0].src = cImages[curImage].image;

我们还需要更新链接到相关页面的代码：

document.getElementById("viewLarge").href = cImages[curImage].page;

就是这样！