2

私は Javascript は初めてですが、CSS といくつかの php を独学で学んでいるので、少し学びたいと思っています。私はここ数日間、自分が何を望んでいるのかを把握するためにずっと探してきました。うまくいけば、これはばかげた質問ではありません。

私のポートフォリオプロジェクトのページ用にミニ画像ギャラリーを構築しようとしています。約 8 つの大きな画像のページがあります。それぞれが異なるプロジェクト用です。画像をクリックすると、そのプロジェクトの次の画像が読み込まれる場所を取得しようとしています（ミッションは達成されました！オンラインで見つけたコードでそれを取得しました）

しかし、セット内の画像を表すために、他の Web サイトで見たようなページネーション ドット (基本的には円の画像) も必要です。プロジェクトの画像が 3 つある場合、3 つのドットが表示され、3 つ目のドットをクリックすると 3 つ目の画像が表示され、そのドット画像が「選択したドット」画像に置き換えられます。わかる？

これを行う方法のスクリプトと例を一日中探していましたが、これが私の Javascript の限界です。これは最初のプロジェクトのスクリプトです。他のスクリプトでは、同じスクリプトを入力しますが、変数を変更します。img1 が img2 になり、次に img3 になります。誰が何が悪いのか教えてもらえますか?

<div class="project" id="proj1">

<script type="text/javascript">
var img1 = [ 
    "img/portf/tiger1.jpg", 
    "img/portf/tiger2.jpg", 
    "img/portf/tiger3.jpg" 
];
img1.current = 0;
function showImage1(i) { 
$('#imag1').fadeOut( function() { 
this.src = img1[img1.current]; 
$(this).fadeIn(); 
}); 
}

function NextImage1() { 
img1.current = (img1.current+1) % img1.length; 
showImage1(img1.current); 
}

function PreviousImage1() { 
if (--img1.current < 0) { img1.current = img1.length - 1; } 
showImage1(img1.current);
}
onload = function(){ 
showImage1(0);
};

</script>

<div class="projname">

<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<a href="javascript:showImage1(0)"><img src="img/active.gif" /></a> 
<a href="javascript:showImage1(1)"><img src="img/inactive.gif" /></a> 
<a href="javascript:showImage1(2)"><img src="img/inactive.gif" /></a>
</div>

<div class="clear"></div>

</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>

</div>
</div>

ここで私がこれまでに持っているものを見ることができます: http://www.gmisen.com 助けてくれてありがとう!!

4

1 に答える 1

0

最高の学習体験ではないかもしれませんが、jQuery サイクル プラグインを使えばこれを簡単に実現できます: http://jquery.malsup.com/cycle/int2.html (ページャーの例を見てください)

ここにデモがあります：http://jsfiddle.net/69LNJ/

HTML

<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>​

JS

$(function() {
    $('.slideshow').before('<div id="nav">').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav'
    });
})​;

CSS

#nav{
  position: absolute;
  top: 20px;
    left: 20px;
    z-index: 1000;
}

#nav a{
  background-color: cyan;
  border-radius: 10px;
  height: 20px;
  width: 20px;
  display: block;
  text-indent: -1000px;
    float: left;
    margin-right: 10px;
}
#nav a.activeSlide{
  background-color: blue;
}

</p>

于 2012-07-23T19:58:15.767 に答える