使用javascript动态链接html页面

This is the code to store five images for an HTML page and then the function is used to display those five images one at a time.

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

This code works and one can scroll through the five images.

此代码有效，可以滚动五个图像。

My question is whether it is possible to direct to different HTML page on the basis of image shown at a particular time

我的问题是，是否可以根据特定时间显示的图像指向不同的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>

2 个解决方案

#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>

#2

Automatic file-name-based Replacement

Suppose you had a link like the following:

假设您有如下链接：

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

That you wanted to dynamically change with each image. When image 2.jpg becomes the primary, we swap out 1.html for 2.html. We could modify the last line of your code to this:

您希望随每个图像动态更改。当图像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 );

Note, though this works it restricts you to having a 1.html for your 1.jpg. This may be undesirable. You may want 1.jpg to go with CityLoft.html. If that's the case, you'd want to associate the image with the proper url in your cImages object:

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

Use Objects to store Related Data

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

Once you've made this change, you only need to restore the references in your code. For instance, we would change the following:

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

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

To this:

对此：

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

We would also need to update our code that links to the relevant page as well:

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

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

That's it!

而已！