1

これは、HTMLページの5つの画像を格納するコードであり、関数を使用して、これらの5つの画像を一度に1つずつ表示します。

このコードは機能し、5つの画像をスクロールできます。

私の質問は、特定の時間に表示された画像に基づいて別の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>

画像ごとに動的に変更したいこと。image 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 に答える