Переключение между двумя изображениями щелчком

ProgramBox

Переключение между двумя изображениями щелчком

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#javascript #image

#javascript #изображение

Вопрос:

Из-за этой ссылки я изменил ее на эту:

   <html>
      <head>
    <script>

    var toggleimage=new Array("p1.gif","p.gif")

    //do not edit the variables below
    var image_1=new Image()
    var image_2=new Image()
    image_1.src=toggleimage[0]
    image_2.src=toggleimage[1]
    var i_image=0

    function testloading() {
        isloaded=true
    }

    function toggle() {
        if (isloaded) {
            document.togglepicture.src=toggleimage[i_image]
        }
        i_image  
        if (i_image>1) {i_image=0}
    }
    onload=testloading
    </script>

        <title>
    </title>
        <meta content="">
        <style></style>
      </head>
      <body>
    <a href="javascript:toggle()"><img name="togglepicture" src="p1.gif" border="0"></a>

    </body>
    </html>

когда я нажимаю на изображение p, оно показывает мне p1 и наоборот
Теперь у проблемного изображения есть имя:

  <a href="javascript:toggle()"><img name="togglepicture" src="p1.gif" border="0"></a>

и он получит имя здесь:

 document.togglepicture.src=toggleimage[i_image]

Я хочу иметь много изображений, поэтому я подумал, что мне нужно изменить togglepicture на переменную
, например:

 function toggle(a) {
    if (isloaded) {
        document.a.src=toggleimage[i_image]
    }
    i_image  
    if (i_image>1) {i_image=0}
}

и для ввода, например, это будет toggle (‘nameofimage’), а в href это будет что-то вроде

  <a href="javascript:toggle('pic1')">

Я не был успешным.Как я могу использовать эту функцию, если у меня есть больше, чем изображение для щелчка?

Ответ №1:

Я сделал модульный toogle, видимый здесь: http://jsfiddle.net/Regisc/N7bgz/2 /

Пример использования:

 <img id="image1" src="http://dummyimage.com/50/f00/fffamp;text=a" 
     onclick='toogle(this, ["http://dummyimage.com/50/ab0/fffamp;text=b",
     "http://dummyimage.com/50/ab0/fffamp;text=c"]);' />

Ответ №2:

вы не можете использовать

 document.a.src=toggleimage[i_image];

вместо этого используйте

 document.getElementById(a).src=toggleimage[i_image];

И вам также нужно добавить id в свой элемент img.

1. вы имеете в виду, что я должен попробовать присвоить идентификатор, а не имя, позвольте мне попробовать

2. Вы можете использовать getElementsByName , но я не думаю, что это работает в IE

Ответ №3:

Что-то вроде следующего должно работать для любого количества изображений при условии, что toggleimage является непрерывным массивом.

 var toggleimage = ["p1.gif","p.gif"];


var toggle = (function() {

    var count = 0;
    var len = toggleimage.length;
    var el = document.getElementsByName('togglepicture')[0]

    return function() {

      if (isloaded) {
        el.src = toggleimage[count   % len];
      }
   };
}());

Ответ №4:

Я не совсем уверен, что понял ваш вопрос. Вы спрашиваете:

Как отредактировать функцию, чтобы разрешить переключение между более чем двумя изображениями, или
Как отредактировать функцию для обработки более одного набора переключаемых изображений?

Переключение между несколькими изображениями

 var toggleimage=new Array("p1.gif","p.gif","p2.gif","p3.gif","p4.gif")
var totalImages=4;

function toggle() {
        if (isloaded) {
            document.togglepicture.src=toggleimage[i_image]
        }
        i_image  
        if (i_image>totalImages) {i_image=0}
    }

Как отредактировать функцию для обработки более одного набора переключаемых изображений?

вызовите функцию JS следующим образом

 <a href="javascript:toggle(this)">

И в вашей функции JS,

 var id = div.id;

Используйте это в an if-else , чтобы определить, какой элемент управления вызвал функцию и, соответственно, какой массив изображений использовать.

 function toggle(div) 
{   
    var id = div.id;
    if (isloaded) 
    {
        if (id == 'myFirstToggleImageControl')
        {
           document.togglepicture.src=toggleimage[i_image];
        }
        else if (id == 'mySecondToggleImageControl')
        {
            document.togglepicture.src=toggleimageSource2[i_image];
        } 

    }
    i_image  
    if (i_image>1) {i_image=0}
}

Примечание: вы захотите использовать независимый счетчик для второго элемента управления. Так что, возможно i_image1 , и i_image2

1. Я просто хочу переключаться между 2 не более чем двумя, но я хочу иметь много изображений, которые будут переключаться между этими 2. здесь, в вашем массиве, мне нужны только p и p1, не более

2. Вы переключаетесь между одними и теми же изображениями в обоих элементах управления, или у каждого элемента управления будет свой собственный массив изображений, которые он будет переключать? Кроме того, обновленный ответ.

Ответ №5:

 <html>
<head>
<script>
  // images list (properties name must by equal to id of IMAGE html element)
  var imageList={
    image1: {
      currentIndex:0,
      images:["p1.gif","p.gif"]
    }
  };
  // preloading images using closure (additionaly replace image URL's with image objects)
  (function() {
    for(var p in imageList)if(imageList.hasOwnProperty(p)) {
      for(var i=0;i<imageList[p].images.length;i  ) {
        var img=new Image(),src=imageList[p].images[i];
        (imageList[p].images[i]=img).src=src;
      }
    }
  })();

  function toogleImage() {
    var info=imageList[this.id];
    info.currentIndex  ;
    if(info.currentIndex===info.images.length)info.currentIndex=0;
    this.src=info.images[info.currentIndex].src;
  }

  // setting start images
  window.onload=function() {
    for(var p in imageList)if(imageList.hasOwnProperty(p)) {
      //try{ 
        document.getElementById(p).src=imageList[p].images[0].src;
      //}
      //catch(ex){}
    }
  }
</script>
</head>
<body>
  <img id="image1" onclick="toogleImage.call(this);"/>
</body>
</html>

http://jsfiddle.net/X4Q2m/

Метки: Переключение между двумя изображениями щелчком