0

私のHTMLページにはidimgの画像があります。アイデアは、最初、前、または次をクリックすることにより、ユーザーが一連の画像をナビゲートできるということです。JavaScriptを使用してこれを行うにはどうすればよいですか？

4

5 に答える 5

1

これはあなたにとって良いスタートになるはずです：

<script>
  var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir
  var index = 0;
</script>
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/>

スライドするには画像をクリックしてください。

ボタンが必要な場合は、次の例を参照してください。

  <img id="clicker" src="img1.png"/>
  <a href="#" onclick="prev(); return false;">Prev</a>
  <a href="#" onclick="next(); return false;">Next</a>
  <a href="#" onclick="first(); return false;">First</a>
  <a href="#" onclick="last(); return false;">Last</a>
<script>
  var imgs = ["img1.png","img2.png","img3.png"];
  var index = 0;
  var clicker = document.getElementById("clicker");
  function prev() { clicker.src = imgs[--index%imgs.length]; }
  function next() { clicker.src = imgs[++index%imgs.length]; }
  function first() { clicker.src = imgs[index=0]; }
  function last() { clicker.src = imgs[index=imgs.length-1]; }
</script>

これreturn falseは、クリック時のデフォルトのアクション（リンクをたどる）が抑制されることを意味します。Javascriptは、要素にアクセスできます。つまり、を使用しますid（clickerここを参照）。これに慣れてブラウザの互換性の問題を解決し始めたら、jQuery（他の人が示唆しているように）、MooTools、または他のフレームワークを続行することをお勧めします。

于 2012-05-30T08:48:08.753 に答える
1

jQueryを使用してください！

var myImg = $("#myimg");
$("#next").click(function(){
    var id = myImg.attr("data-id") + 1;
    myImg.attr("src", "image"+id+".jpg");
});
$("#prev").click(function(){
    var id = myImg.attr("data-id") -1;
    myImg.attr("src", "image"+id+".jpg");
});

HTML：

<img id="myimg" src="image1.jpg" data-id="1">
<a href="#" id="next">Next</a><br>
<a href="#" id="prev">Previous</a><br>

これは非常にダミーの例です。そこにはたくさんのスライドショープラグインがあります！

于 2012-05-30T08:38:47.217 に答える
1

jQueryは必要ありません：

<script type='text/javascript'>
  window.onload = function() {
    var imageSrcs= ['1.jpeg', '2.jpg', '3.jpg'];
    var index = 0;
    var image = document.getElementById('img');

    var previous = document.getElementById('previous');
        previous.onclick = function() {
            index -= 1;
            if(index < 0) index = imageSrcs.length - 1;
            image.src = imageSrcs[index];
        }

    var next = document.getElementById('next');
        next.onclick = function() {
            index += 1;
            if(index == imageSrcs.length) index = 0;
            image.src = imageSrcs[index]; 
        }

 }
</script>

そしてhtml：

<img src='1.jpeg' id='img'>
<div>
    <span id='previous'>Previous</span>
    <span id='next'>Next</span>
</div>
于 2012-05-30T09:53:54.503 に答える
0

このようなものを試してください（テストされていません）：

JQUERYの読み込み：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"  type="text/javascript"></script>

JAVASCRIPT：

<script type='text/javascript'>
  var lst_src = ['img1.jpg', 'img2.png', 'img3.gif'];
  $('a', '#nav').click(function(e) {
    e.preventDefault();
    var src_current = $('#img').attr('src');
    var index = lst_src.indexOf(src_current);
    var len = lst_src.length;
    var action = $(this).attr('class');
    switch ($action) {
      case 'previous' : var i = index - 1;
                        if (i < 0) src_current = lst_src[len + i];
                        else src_current = lst_src[i];
                        break;
      case 'next'     : var i = index + 1;
                        if (i > len) src_current = lst_src[i - len];
                        else src_current = lst_src[i];
                        break;
      case 'first'    : src_current = lst_src[0];
                        break;
      case 'last'     : src_current = lst_src[len - 1];
                        break;
     }
     $('#img').attr('src', src_current);
  });
</script>

HTML：リンクのクラスを使用して、必要なアクションを示します。

<img id='img' src='img1.jpg'>

<p id='nav'>
  <a href='' class='first'>&larr;&larr;First</a>
  <a href='' class='previous'>&larr;Previous</a>
  <a href='' class='next'>Next&rarr;</a>
  <a href='' class='last'>Last&rarr;$rarr;</a>
</p>
于 2012-05-30T09:20:35.250 に答える
0

このためのライブラリは必要ありません。このようなものは、画像のURLを変更します。ここで、「theImg」は画像のURLですid。

document.getElementById("theImg").src = "newUrl.png";

明示的なidsなしでそれを行うには、これによりURLが変更されます。ここiで、は画像のインデックスです。

document.getElementsByTagName("img")[i].src = "newUrl.png";
于 2012-05-30T08:46:10.470 に答える