1

私はJSとJqueryに精通していないので、ここの誰かが私を助けてくれることを本当に望んでいます。ページの読み込みまたは更新時にバナーの画像を変更したいのですが、次のコードが見つかりました。

<script type="text/javascript">
window.onload = function () {
var random = document.getElementById('random');
var pictures = new Array('images/icn_slide-1.jpg','images/icn_slide-2.jpg','images/icn_slide-1.jpg','images/icn_slide-2.jpg');
var numPics = pictures.length;
if (document.images) {
    var chosenPic = Math.floor((Math.random() * numPics));
    random.style.background = 'url(' + pictures[chosenPic] + ')';
}
}

上記のスクリプトは非常にうまく機能します（背景画像は更新ごとに変更されます）が、視聴者が次/前をクリックしたときに別の画像が表示されるように、前と次のボタンを追加したいと思います（実際にはすでに行っています）。これを行う簡単な方法はありますか？次と前のボタンを機能させるにはどうすればよいですか？どんな助けでも大歓迎です。ありがとう！

これは私のhtml内の唯一のコンテンツです：

<div id="random" style="width: 1399px; height:515px; margin:auto;">
<div id="slide_control" class="clearfix">
<span id="prev"><img alt="" title="" src="images/icn_nav-arrow2.png" /></span>
<span id="next"><img alt="" title="" src="images/icn_nav-arrow.png" /></span>
</div>
</div>

今のところ、更新時に背景画像を変更するのは#random divであり、私はそれをそのようにしたいと思っています。「prev」ボタンと「next」ボタンを含む「slide_control」を追加しました。クリックしたときに#randomの背景画像も変更する必要があります。

ほとんどのJS/JQqueryスライダーとプラグインにはボタンとコントローラーが付属していますが、画像を自動再生します。自動再生を無効にしても、更新時にバナー/背景は変更されません。

更新時に画像/背景をランダムに変更するか、前/次のボタンがクリックされたときに変更するだけですが、これを実現する方法がわかりません。

4

1 に答える 1

0

これがあなたが求めているものの基本的な例です：

<script type="text/javascript">
function rotateImage(idx) {
    var random = document.getElementById('random');

    if (document.images) {
        random.style.background = 'url(' + pictures[idx] + ')';
        selectedImage = idx;
    }
}

function getNext() {
      var nextImage = selectedImage + 1;
      if (selectedImage >= numPics) {
          nextImage = 0;
      }
      rotateImage(nextImage);
}

function getPrev() {
      var prevImage = selectedImage - 1;
      if (selectedImage < 0) {
          selectedImage = numPics -1;
      }
      rotateImage(prevImage);
}

var pictures = new Array('images/icn_slide-1.jpg','images/icn_slide-2.jpg','images/icn_slide-1.jpg','images/icn_slide-2.jpg');
var numPics = pictures.length;
var selectedImage = null;

window.onload = function () {
     var chosenPic = Math.floor((Math.random() * numPics));
     rotateImage(chosenPic);
     document.getElementById('next').onclick = getNext;
     document.getElementById('prev').onclick = getPrev;
}
</script>
于 2012-09-20T17:46:29.793 に答える