1

最初の画像にループバックする単一のページに複数の手動スライドショーがあるポートフォリオサイトに取り組んでいます。私の既存のコードは、単一のスライドショー/画像セットで動作します。コードを繰り返さずに追加のスライドショー/画像セットを導入する方法に問題があります。各画像セットの配列を作成しようとしました。私の考えは、使用する特定の配列を HTML から JS に渡すことでした。しかし、JS で目的の配列を示す方法がわかりません。私は Javascript はまったく初めてで、Python にはかなり精通しています。HTML と JS の間で関数に値を渡すのは、時々少し混乱します。

HTML:

    <nav id="nav_bar">
<a href="JavaScript:slideshowBack()">PREV</a>
<span>/</span>
<a href="JavaScript:slideshowUp()">NEXT</a>
</nav> 
</header>
<figure id="image">
<img src="http://img.photobucket.com/albums/v486/TimClark123456789/344ca6b8-9f67-4fc9-a745-731870d4f6f2_zps9e1f364a.jpg" name="mypic" border=0>

Javascript:

var num=1
img1 = new Image ()
img1.src = "http://img.photobucket.com/albums/v486/TimClark123456789/344ca6b8-9f67-4fc9-a745-731870d4f6f2_zps9e1f364a.jpg"
img2 = new Image ()
img2.src = "IMG_7431.jpg" 
img3 = new Image ()
img3.src = "IMG_7396.jpg"
img4 = new Image ()
img4.src = "img_4.jpg" 
img5 = new Image () 
img5.src = "img_6.jpg"
img6 = new Image ()
img6.src = "img_7.jpg"

function slideshowUp()
{
num=num+1
if (num==7)
{num=1}
document.mypic.src=eval("img"+num+".src")
}

function slideshowBack()
{
num=num-1
if (num==0)
{num=6}
document.mypic.src=eval("img"+num+".src")
}
4

1 に答える 1

0

なぜ車輪を再発明するのですか？あなたが心配している問題を解決する、非常によく構築された、戦闘でテストされた JavaScript カルーセルがたくさんあります。良い例は、Filiament Group のhttps://github.com/filamentgroup/responsive-carouselです。

独自に記述する必要がある場合は、次のようにして上記のコードを最適化できます。

var imageArray = [
  'img/src/example.jpg', 
  'image/src/example2.jpg'
  // and so on, not forgetting commas between each, but not after the last one!
  ];
var images = [];

for (var i = 0; i < imageArray.length; i++) {
    images[i] = new Image();
    images[i].src = imageArray[i]
}

そして今、コードを再利用しています。異なるカルーセルごとに異なる画像配列を作成できます。また、事前コマンドに引数を持たせることで、特定のカルーセルを指すようにすることもできます。

于 2013-08-18T21:17:30.670 に答える