1

这是为 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>
4

2 回答 2

2

html设置

<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>
于 2012-04-19T13:36:05.590 回答
1

基于文件名的自动替换

假设您有如下链接：

<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对象中的正确 url 相关联：

使用对象存储相关数据

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;

而已！

于 2012-04-19T13:33:21.723 回答