переключение по

98
02 ноября 2021, 21:50

<html> 
<meta charset="utf-8"> 
<title>Canvas workshop</title> 
<style> 
  * { 
    padding: 0; 
    margin: 0; 
  } 
   
  #line { 
    width: 70%; 
    height: 100%; 
    display: flex; 
  } 
   
  #line1 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line2 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  #line3 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line4 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  #line5 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line6 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  .pic_push_down { 
    margin-left: 50%; 
    margin-Right: 50%; 
    margin-top: 100%; 
  } 
</style> 
 
<body> 
  <div id="line"> 
    <div id="line1"> 
      <p class="pic_push_down" id='pic1'></p> 
    </div> 
    <div id="line2"> 
      <p class="pic_push_down" id='pic2'></p> 
    </div> 
    <div id="line3"> 
      <p class="pic_push_down" id='pic3'></p> 
    </div> 
    <div id="line4"> 
      <p class="pic_push_down" id='pic4'></p> 
    </div> 
    <div id="line5"> 
      <p class="pic_push_down" id='pic5'></p> 
    </div> 
    <div id="line6"> 
      <p class="pic_push_down" id='pic6'></p> 
    </div> 
 
  </div><br> 
  <div align="center"> 
    <button onClick="left_button()"><=</button> 
    <button onClick="right_button()">=></button> 
    <br> 
  </div> 
 
 
  <script> 
    document.onkeypress = function(event) { 
      console.log(event); 
    } 
    document.mousedown = function(event) { 
      console.log(event); 
    } 
    var i = 1; 
    var pic = document.getElementById('pic' + i).innerHTML = '<img id="cockerel.png" src="cockerel.png" width="50px">'; 
 
    function left_button() { 
      if (i < 6) { 
        i++; 
      } 
 
    } 
 
    function right_button() { 
      if (i > 6) { 
        i--; 
      } 
    } 
  </script> 
</body> 
 
</html>

Почему то не получается переключать объект между блоками. Что делать? функция left_button() и right_button() не срабатывает. Как поставить при нажатии кнопки переключение на левый или правый блок? Все обыскал нигде такого решения нету.

Answer 1

Все обыскал нигде такого решения нету.

Плохо/не правильно искали, решений полно. В вашем коде разбираться не стал т.к. практически ничего и нет, и ошибок много. Вот вам пример:

var carousel = function (){ 
    return { 
      init: function(elem){ 
      let link = 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Rooster02.jpg', 
			img = '<img id="image" src="'+link+'" width="50px">'; 
      this.setImage(img); 
      document.onkeydown = this.checkKey; 
    }, 
    setImage: function(imageNode){ 
    	document.getElementById('pic1').innerHTML = imageNode; 
    }, 
    checkKey: function (e){ 
      e = e || window.event; 
      let pictures = document.getElementById('line').querySelectorAll('.pic_push_down'), 
          pictLength = pictures.length, 
      		nextButton = document.querySelector('#nextButton'), 
          prevButton = document.querySelector('#prevButton'), 
          image = document.querySelector('#image'), 
          current = image.closest('p.pic_push_down').parentElement; 
      if (e.keyCode == '37') { 
      	let prevElem = current.previousElementSibling; 
        if (prevElem) { 
        	prevElem.querySelector('p.pic_push_down').prepend(image); 
        } else { 
        	pictures[pictLength-1].prepend(image); 
        } 
      } 
      else if (e.keyCode == '39') { 
      	let nextElem = current.nextElementSibling; 
        if (nextElem) { 
        	nextElem.querySelector('p.pic_push_down').prepend(image); 
        } else { 
        	pictures[0].prepend(image); 
        } 
      } 
    } 
  } 
}(); 
carousel.init(); 
let prev = document.getElementById('prevButton'), 
		next = document.getElementById('nextButton'); 
prev.onclick = function() { 
	carousel.checkKey({keyCode:37}); 
}; 
next.onclick = function() { 
	carousel.checkKey({keyCode:39}); 
}
* { 
    padding: 0; 
    margin: 0; 
  } 
   
  #line { 
    width: 70%; 
    height: 100%; 
    display: flex; 
  } 
   
  #line1 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line2 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  #line3 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line4 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  #line5 { 
    width: 25%; 
    height: 100%; 
    background-color: wheat; 
    flex-flow: row; 
  } 
   
  #line6 { 
    width: 25%; 
    height: 100%; 
    background-color: thistle; 
  } 
   
  .pic_push_down { 
    margin-left: 50%; 
    margin-right: 50%; 
    margin-top: 100%; 
  }
<div id="line"> 
    <div id="line1"> 
      <p class="pic_push_down" id='pic1'></p> 
    </div> 
    <div id="line2"> 
      <p class="pic_push_down" id='pic2'></p> 
    </div> 
    <div id="line3"> 
      <p class="pic_push_down" id='pic3'></p> 
    </div> 
    <div id="line4"> 
      <p class="pic_push_down" id='pic4'></p> 
    </div> 
    <div id="line5"> 
      <p class="pic_push_down" id='pic5'></p> 
    </div> 
    <div id="line6"> 
      <p class="pic_push_down" id='pic6'></p> 
    </div> 
 
  </div><br> 
  <div align="center"> 
    <button id="prevButton">left</button> 
    <button id="nextButton">right</button> 
  </div>

Answer 2

<!DOCTYPE html> 
 <html> 
 
  <head> 
   <meta charset="utf-8"> 
   <title>Canvas workshop</title> 
 
   <style> 
     * { 
        padding: 0; 
        margin: 0; 
     } 
     #line { 
       width: 70%; 
       height: 100%; 
       display: flex; 
     } 
     #line1 { 
       width: 25%; 
       background-color: wheat; 
     } 
     #line2 {  
       width: 25%; 
       background-color: thistle; 
     } 
     #line3 { 
       width: 25%; 
       background-color: wheat; 
     } 
     #line4 { 
       width: 25%; 
       background-color: thistle; 
     } 
     #line5 { 
       width: 25%; 
       background-color: wheat; 
     } 
     #line6 { 
       width: 25%; 
       background-color: thistle; 
     } 
     .pic_push_down { 
       margin-left: 0%; 
       margin-right: 0%; 
       margin-top: 0%; 
     } 
   </style> 
  </head> 
 
  <body> 
    <div id="line"> 
      <div id="line1"> 
        <p class="pic_push_down" id='pic1'></p> 
      </div> 
      <div id="line2"> 
        <p class="pic_push_down" id='pic2'></p> 
      </div> 
      <div id="line3"> 
        <p class="pic_push_down" id='pic3'></p> 
      </div> 
      <div id="line4"> 
        <p class="pic_push_down" id='pic4'></p> 
      </div> 
      <div id="line5"> 
        <p class="pic_push_down" id='pic5'></p> 
      </div> 
      <div id="line6"> 
        <p class="pic_push_down" id='pic6'></p> 
      </div> 
    </div> 
    <br> 
    <div align="center"> 
      <button id="prev"><=</button> 
      <button id="next">=></button> 
    </div> 
 
  <script> 
    let link = 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Rooster02.jpg', 
        img = '<img id="image" src="'+link+'" width="180px">', 
        i = 1, 
        pic = document.getElementById('pic'+i.toString()).innerHTML = img; 
 
    function next_button() { 
      if (i < 6) { 
        pic = document.getElementById('pic'+i.toString()).innerHTML = ""; 
        i++; 
        pic = document.getElementById('pic'+i.toString()).innerHTML = img; 
      } 
    } 
 
    function prev_button() { 
      if (i > 1) { 
        pic = document.getElementById('pic'+i.toString()).innerHTML = ""; 
        i--; 
        pic = document.getElementById('pic'+i.toString()).innerHTML = img; 
      } 
    } 
 
    document.getElementById("next").onclick = function() { 
      next_button();   
    }; 
 
    document.getElementById("prev").onclick = function() { 
      prev_button(); 
    }; 
 
  </script> 
 </body> 
 
</html>

А ещё можно так.

READ ALSO
Уникальный процесс в одноранговой сети?
c#

Уникальный процесс в одноранговой сети?

Есть процесс(сервис), он должен быть один в одноранговой сетиТо бишь, только на одной машине должен быть запущен этот процесс

 178
Поворот персонажа в Unity и анимация поворота
c#

Поворот персонажа в Unity и анимация поворота

 101
asp.net DropDownList задать стиль при наведении?
c#

asp.net DropDownList задать стиль при наведении?

У меня есть такой блок кодаВ результате он выглядит вот так: У меня не получается сменить стиль при наведении наListItem (синие выделение)

 165
Вопрос по оформлению - отлова ошибок - избежание вылетов
c#

Вопрос по оформлению - отлова ошибок - избежание вылетов

Кодинг не профессия и поэтому не читал и не смотрел как и кто что то оформляет - делаетПросто хобби - понимаю что делают переменные и всякие...

 248