이미지와 이미지를 설명하는 텍스트가있는 웹 페이지를로드하는 onClick 함수를 추가하는 방법은 무엇입니까?

이 문제는 5 회전 이미지 회전식 캐 루셀에 클릭 기능을 추가하는 작업입니다. 이미지를 클릭하면 왼쪽 이미지가 떠있는 웹 페이지를로드하고 이미지를 설명하는 텍스트를로드합니다. 나는 완전히 잃어버린거야.이미지와 이미지를 설명하는 텍스트가있는 웹 페이지를로드하는 onClick 함수를 추가하는 방법은 무엇입니까?

이미 완료 한 HTML 및 CSS이지만 이미지를 설명하는 텍스트와 함께 onClick 이벤트를 추가하는 방법을 모르겠습니다. 어떤 도움을 주시면 감사하겠습니다.

@-webkit-keyframes spinner { 
 
    from { 
 
    -webkit-transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(-360deg); 
 
    } 
 
} 
 

 
#stage { 
 
    margin: 1em auto; 
 
    -webkit-perspective: 1200px; 
 
} 
 

 
#spinner { 
 
    -webkit-animation-name: spinner; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-duration: 6s; 
 
    -webkit-transform-style: preserve-3d; 
 
} 
 

 
#spinner:hover { 
 
    -webkit-animation-play-state: paused; 
 
} 
 

 
#spinner img { 
 
    position: absolute; 
 
    border: 1px solid #ccc; 
 
    background: rgba(255, 255, 255, 0.8); 
 
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); 
 
}

<body> 
 
    <div id="stage" style="padding-left: 180px; height: 160px;"> 
 
    <div id="spinner" style="-webkit-transform-origin: 180px 0 0;"> 
 
     <img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="images/truck1.jpg" width="200" height="160" alt=""> 
 
     <img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck2.jpg" width="213" height="160" alt=""> 
 
     <img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/truck3.jpg" width="240" height="160" alt=""> 
 
     <img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck4.jpg" width="213" height="160" alt=""> 
 
     <img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="images/truck5.jpg" width="238" height="160" alt=""> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-11-27 joe johnson

<div id="stage" style="padding-left: 180px; height: 160px;"> 
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;"> 
    <img onclick="showInfo(1)" style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="images/truck1.jpg" width="200" height="160" alt=""> 
    <img onclick="showInfo(2)" style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck2.jpg" width="213" height="160" alt=""> 
    <img onclick="showInfo(3)" style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/truck3.jpg" width="240" height="160" alt=""> 
    <img onclick="showInfo(4)" style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="images/truck4.jpg" width="213" height="160" alt=""> 
    <img onclick="showInfo(5)" style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="images/truck5.jpg" width="238" height="160" alt=""> 
</div> 
<script type="text/javascript"> 
    function showInfo(truck) { 
    switch (truck) { 
     case 1: 
     document.getElementById('description').innerHTML = "truck1"; 
     break; 
     case 2: 
     document.getElementById('description').innerHTML = "truck2"; 
     break; 
     case 3: 
      document.getElementById('description').innerHTML = "truck3"; 
      break; 
     case 4: 
      document.getElementById('description').innerHTML = "truck4"; 
      break; 
     case 5: 
      document.getElementById('description').innerHTML = "truck5"; 
      break; 
    } 
    } 
</script>

다른 곳 사업부 내에서 설명을 표시합니다,이 도움이되기를 바랍니다 :

이는 HTML 웹 페이지의 CSS는 P

출처

2017-11-28 15:59:20 TheIlluminatiMember

이미지와 이미지를 설명하는 텍스트가있는 웹 페이지를로드하는 onClick 함수를 추가하는 방법은 무엇입니까?

답변

관련 문제