如何获得幻灯片的当前图片来源？

对这里的编码完全陌生。 Learning the basics.如何获得幻灯片的当前图片来源？

我怎样才能为“仅图片”，在幻灯片中的当前图片时，点击？ 通常在HTML我只想把这个周围：

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

但在这个版本我只是似乎没有得到它。点击小图片会使它们看起来像大中心的一样。当前点击大图只会暂停/继续放映幻灯片。

$(".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包含在代码片段中，否则，您可以在每行之前包含一段带有四个缩进的代码 – jolyeons

@JoseRojas点击它时（大图），是的。 :) –

JavaScript的部分不是香草的JavaScript，它是您在学习一些编码时可能听说过的'jquery'的示例。

jquery是JavaScript的语法糖。 $是你的暗示，这可能是jquery（还有其他js库使用$语法，但我认为jquery是最流行的）。

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

这是jquery代码从页面中选择一个元素，'。'用于选择课程，'＃'用于选择ID，还有许多其他人可以查看。这让你一个jQuery对象，然后可以保存到一个变量，调用一个方法等

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

这些被称为了jQuery对象，这恰好是事件函数功能的示例。首先是为所选元素（所有元素具有'crop-img'类的元素）的点击事件分配一个函数，第二个是触发选定元素的点击事件（id为'imageX'的元素与'X'是计数器的当前值）。

，而不是一个函数名此外，您还可以只内联函数：

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

这与ID =“bigImage”，该元素的click事件分配未命名的内联函数，它是你想要拉起图像。把你的代码放在那里，将会显示图像，当点击大图时它会运行。

比如，如果你想真正去的形象，在你的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

谢谢！这太棒了！ codepen帮助了很多！现在没有关于window.location.href部分。现在我懂了。 :) –

您可以检索当前图像的src当你点击这样的大图像：

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

计数器设置好的作为索引你目前的图像，这应该在你的$("#bigImage")点击功能。

来源

2016-11-08 20:39:20

如何获得幻灯片的当前图片来源？

回答

相关问题