슬라이드 쇼의 현재 그림 소스를 얻으려면 어떻게합니까?

여기에 코딩하는 것이 완전히 새롭습니다. Learning the basics.슬라이드 쇼의 현재 그림 소스를 얻으려면 어떻게합니까?

슬라이드 쇼의 현재 사진을 클릭하면 어떻게 "사진 만"에 들어갈 수 있습니까?

<a href="image.jpg">Current picture </a>

을하지만,이 버전에서 난 그냥 그것을 얻을하지 않는 것 : 일반적으로 HTML에 난 그냥 주위에이 둘 것입니다. 작은 그림을 클릭하면 큰 그림으로 표시됩니다. 큰 그림을 클릭하면 현재 슬라이드 쇼가 일시 중지/계속됩니다. 보이는 방법

$(".crop-img").click(function(){ 
    $("#bigImage").attr("src", 
    $(this).attr("src")); 
}); 

var counter=1; 
$("#image"+counter).click(); 

$("#forward").click(function(){ 
    counter = counter + 1; 
    if (counter>4){ 
     counter=1; 
    } 
    $("#image"+counter).click(); 
}) 

$("#backward").click(function(){ 
    counter=counter-1; 
    if (counter<1){ 
     counter=4; 
    } 
    $("#image"+counter).click(); 
}) 

$("#bigImage").click(function(){ 
    paused=!paused; 
})

사진이

내 post about it. 에 감사합니다!

전체 코드이 같은 큰 이미지를 클릭하면

<html> 
    <head> 
     <title> FWP - Gallery </title> 

     <script src="jquery-3.1.1.min.js"></script> 

      <link rel="stylesheet" 
        type="text/css" 
        href="bootstrap.css"> 

      <link rel="stylesheet" 
        type="text/css" 
        href="mystyles.css"> 

      <link rel="stylesheet" 
        type="text/css" 
        href="https://fonts.googleapis.com/css?family=Gruppo"> 

      <link rel="stylesheet" 
        type="text/css" 
        href="https://fonts.googleapis.com/css?family=Syncopate"> 

    </head> 

    <body> 

    <div class="container"> 
     <h1>Image Gallery</h1> 

     <div class="row"> 
      <div class="col-md-3 thin_border"> 
       <img id="image1" 
        class="crop-img" 
        src="before.jpg" 
        alt="before prisma"> 
      </div> 
      <div class="col-md-3 thin_border"> 
       <img id="image2" 
        class="crop-img" 
        src="after.jpg" 
        alt="after prisma"> 
      </div> 
      <div class="col-md-3 thin_border"> 
       <img id="image3" 
        class="crop-img" 
        src="sleepy.jpg" 
        alt="Sleepy cat"> 
      </div> 
      <div class="col-md-3 thin_border"> 
       <img id="image4" 
        class="crop-img" 
        src="Cute.jpg" 
        alt="Cute cat"> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-1 thin_border"> 
       <button id="backward">&lt;</button> 
      </div> 
      <div class="col-md-10 thin_border"> 
        <img id="bigImage" 
         class="big-img" 
         src="before.jpg" 
         alt="before prisma"> 
      </div> 
      <div class="col-md-1 thin_border"> 
       <button id="forward">&gt;</button> 
      </div> 
     </div> 
    </div> 



     <script> 
      var paused=false; 

      setInterval(function(){ 
       if(!paused){ 
        $("#forward").click(); 
       } 
      }, 3000); 

      $("#bigImage").click(function(){ 
        paused=!paused; 

       }); 

      $(".crop-img").click(function(){ 
       $("#bigImage").attr("src", 
        $(this).attr("src")); 
      }); 
      var counter=1; 

      $("#image"+counter).click(); 

      $("#forward").click(function(){ 
       counter = counter + 1; 
        if (counter>4) { 
         counter=1; 
        } 
       $("#image"+counter).click(); 
      }) 

      $("#backward").click(function(){ 
       counter=counter-1; 
        if (counter<1) { 
         counter=4; 
        } 
        $("#image"+counter).click(); 
      }) 

     </script> 


    </body> 


</html>

출처

2016-11-08 a tech kat

어떻게 현재 사진을 가져 오시겠습니까? 내말은, 어떤 순간에? 이미지를 클릭하면? –

또한 작동 시키려면 스 니펫에 html을 포함 시키십시오. 그렇지 않으면 각 줄 앞에 4 개의 들여 쓰기 부분이 포함될 수 있습니다. – jolyeons

@JoseRojas 예 (큰 이미지)를 클릭하면 예. :) –

자바 스크립트의 섹션은 바닐라 자바 스크립트가 아니며, 약간의 코딩을 배우려는 귀하의 탐구에서 들었을 수도있는이 'jquery'의 샘플입니다.

Jquery는 javascript 용 구문 설탕입니다. $는 jquery 일 수 있다는 사실을 알기위한 단서입니다 ($ 구문을 사용하는 다른 js 라이브러리가 있지만 jquery가 가장 널리 퍼져 있다고 생각합니다).

$(".crop-img") 
$("#bigImage") 
$("#image"+counter)

페이지에서 요소를 선택하는 jquery 코드 인 '.' 클래스를 선택하기위한 것이고, '#'은 ID 선택을위한 것이고, 당신이 볼 수있는 수많은 톤이 있습니다. 이렇게하면 당신은 다음의 메소드를 호출, 변수에 저장할 수있는 JQuery와 객체 등이 이벤트 기능이 될 일이 JQuery와 객체에 호출되는 함수의 예입니다

$(".crop-img").click(someFunctionNameHere); 
$("#image"+counter).click();

을 가져옵니다. 첫 번째는 선택한 요소의 click 이벤트 (클래스 'crop-img'를 가진 모든 요소)에 함수를 할당하고 두 번째 요소는 선택한 요소 (id = 'imageX'인 요소)의 click 이벤트를 발생시키는 것입니다. 'X'는 카운터의 현재 값임). 대신에 함수 이름의 또

, 당신은 단지 대신 함수를 인라인 할 수 있습니다

는

$("#bigImage").click(function(){ 
    paused=!paused; 
})

이 ID = 'bigImage'와 요소의 클릭 이벤트에 대한 익명의 인라인 함수를 할당하는이 어디입니까 이미지를 끌어 올리고 싶다. 거기에 이미지를 가져올 코드를 넣으면 큰 이미지를 클릭 할 때 실행됩니다.

실제로 이미지에 가고 싶은 경우에, 당신의 HTML의 예에서와 같이, 거기에이 줄을 넣어 예를 들면 : 현재 bigImage의 SRC에를 수행 할 수 있습니다 알고 싶다면

window.location.href = "someHrefHere";

을 jquery로 잡고 :

var myhref = $("#bigImage").attr("src");

거기에서 함께 넣을 수 있습니다.

해피 코딩!

출처

2016-11-08 20:40:35 jolyeons

막히면, 전체 코드를 사용하여 codepen을 만들었습니다. (그리고 이미지 srcs가 변경되어 나를 위해 잘 작동합니다.) http://codepen.io/jolyeons/full/KNdPNY/ – jolyeons

고마워요! 이것은 대단하다! 코데 판은 많은 도움이되었습니다! 이제 window.location.href 부분에 대해 살펴 보지 않았습니다. 이제 알았어. :) –

당신은 현재 이미지의 SRC를 검색 할 수 있습니다

$(".row div:nth-child("+counter+") img").attr('src')

카운터의 지표로 잘 살고 있었다 당신의 현재 이미지는 $("#bigImage") 클릭 기능 안에 있어야합니다.

출처

2016-11-08 20:39:20

슬라이드 쇼의 현재 그림 소스를 얻으려면 어떻게합니까?

답변

관련 문제