2012-01-19 11 views
-2

単純なフェージングのJavaスライドショーを作成したいと思います。私はリストといくつかのJavaScriptを使用して非常に単純な画像ビューアを作成しましたが、これは非常に基本的でclunkyでした。達成しようとしている効果は、このリンク[1]で見ることができます:http://www.jessicakripp.com私はちょうど1つのプレースホルダーで4から5の画像でこの効果を作成する必要があります。効果はjqueryによってのみ達成できますか?私はストレートjavascriptでこれを行うことを試みていました。私が見た他のリソースはいくつかのコードを示していますが、私はこれを実装するのに失敗しています。誰かが私にこの簡単な再利用可能なソリューションを提供できますか?非常にエレガントではない私のギャラリーのために現在使用しているコードを見てください。私のコードは、リストを使用してプレースホルダ内の画像を選択します。フェードするJavaスライドショースクリプト

Webページのコード

<body> 
<h1>Snap Shots</h1> 

<ul> 
<li><a href="images/chips.jpg" onclick="showPic(this); 
return false;" title="a plate of chips">Chips</a> 
</li> 

<li><a href="images/rice.jpg" onclick="showPic(this); 
return false;" title="a plate of rice">Rice</a> 
</li> 

<li><a href="images/beach.jpg" onclick="showPic(this); 
return false;" title="a beach">Beach</a> 
</li> 

<li><a href="images/seats.jpg" onclick="showPic(this); 
return false;" title="a seat">Seats</a> 
</li> 

</ul> 

<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" /> 



</body> 

JavaScript関数

function showPic(whichpic) 
{ 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
} 

感謝

+1

にこれを挿入します。あなたはjqueryを使いたくないですか?それはあなたのためにとても大事です。 –

+0

私はこれに同意しなければなりません。フェードインスクリプトは、3つの連鎖機能を持つオンライナーではなく、たくさんのコードです。 – mplungjan

答えて

1

私は効果リンクまたは何か他のものを見ていなかったが、私はjQueryをお勧めすることができます。それがDOMを操作するための標準です。

0

あなたは、これが20未満行で完了することができjqueryのを使用することができれば<Head>

<script language="JavaScript1.1"> 
<!-- 

/* 
JavaScript Image slideshow: 
*/ 

var slideimages=new Array() 
var slidelinks=new Array() 
function slideshowimages(){ 
for (i=0;i<slideshowimages.arguments.length;i++){ 
slideimages[i]=new Image() 
slideimages[i].src=slideshowimages.arguments[i] 
} 
} 

function slideshowlinks(){ 
for (i=0;i<slideshowlinks.arguments.length;i++) 
slidelinks[i]=slideshowlinks.arguments[i] 
} 

function gotoshow(){ 
if (!window.winslide||winslide.closed) 
winslide=window.open(slidelinks[whichlink]) 
else 
winslide.location=slidelinks[whichlink] 
winslide.focus() 
} 

//--> 
</script> 
+0

フェードが見られません –