1

コード （参照されている画像がないと結果が正しく表示されないことに注意してください）

私は大学の学生労働者で、プログラミングの経験があります。上司から、ここにあるようなスライドショーを作ってほしいと言われました。基本的なW3スクールのチュートリアル以外は、JavascriptまたはjQueryについて何も知らないので、自分の目的のために変更するために外部ソースからコードを取得することにしました。

このコードのビルドで2つの問題が発生しました。私の最初の問題は、2つのうちのより単純なものです。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(<img src="img\rssSmall.jpg" />)"></a>

スライドショーの下部に小さなサムネイル画像を作成して、スライド間をタブで移動しようとしています。残念ながら、引用符がネストされているため、IDE（重要な場合はAptana）はコード化された引用符を次のように解釈します。

"$('.slideshow').blinds_change(<img src="

と

" />)"

したがって、適切なサムネイル画像の代わりに「/>）」が表示されます。

私の2番目の問題は、各スライドをリンクにすることです。何らかの理由で、単純なタグは機能しません。

<li><a href="http:\\google.com"><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></a></li>

これは、Javascript / jQueryの側面と関係があると思います。これは、現時点では私の頭上にあります。

あなたが私に与えることができるどんな助けにも前もって感謝します！

自分でいくつかの画像を挿入したい場合、サイズはスライドの場合はw500 h350、タブの場合はw77h54です。または、必要に応じて、関連するすべての画像をアップロードしてみることができます。

4

2 に答える 2

0

あなたの最初の問題に：

スラッシュを使用して引用符をエスケープできます。例：

"$('.slideshow').blinds_change('<img src=\"/some/path\" />')"

あなたの2番目の問題に：

リンクが正しくありません。そのはず：

href="http://google.com"
于 2012-05-23T17:30:48.703 に答える
0

<scriptこれをページの先頭のタグの下に追加する必要があります。

これにより、ブラインドプロセスが開始されます。

<script language="javascript">

    $(document).ready(function()
    {
    $(".slidehsow").blinds();
    });


</script>

次に、<aリンクが見つかりますが、サムネイルを追加する場合は、次のように変更します。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)"><img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" /></a>

そして、彼らとして、仕事はニンジンです！

つまり、メインの画像は要素内に含まれ<li>、サムネイルは要素内に含まれ<aます。

質問2の編集

jQueryブラインドコードを見ると<li>、画像が新しいdivの背景画像に変更されているため、アイテムを適切なリンクに変換する手段がありません。

jquery.blinds-0.9.js次のようにファイルを編集する必要があります。

49行目は次のようになります。

blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }

これにより、親要素（画像）href属性が配列に追加されます。

89行目は次のようになります。

,'cursor': 'pointer'

これは、画像上にあるときにマウスがリンクポインタになることを意味します

次の行を91行目に挿入します。

tile.click(function (e) { window.location = blinds_images[0]['href']; });

このセットは、最初のタイルからのデフォルトのリンクを設定します。

最後に、115行目（または挿入された行の前の114行目）は次のようになります。

$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });

繰り返しますが、これはをピックアップしhref、特定のスライドをクリックするとブラウザをそこに誘導します。

これらの変更により、通常のコードは<li><a href="somelink.htm"><img src="someIMage.png" /></a></li>期待どおりに機能します。

警告私は要素なしでこれをテストしていないので、<aリンクのないリストアイテムは空のものが必要になるか（多分）、null値をキャプチャするためにjQueryコードをさらに微調整する必要があります。

于 2012-05-23T17:34:10.860 に答える