Question

点击幻灯片的当前图片，如何才能获得“仅图片”？ 通常在 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>

Answer 1

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

Jquery是javascript的语法糖。 $是你的关键，因为这可能是jquery（还有其他js库使用$ syntax但我认为jquery是最普遍的）。

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

这是用于从页面中选择元素的jquery代码，'。'用于选择类，'＃'用于选择id，还有很多其他的你可以查找。这将为您提供一个jquery对象，然后您可以将其保存到变量，调用方法等等。

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

这些是在jquery对象上调用的函数的示例，它恰好是事件函数。第一个是为所选元素的click事件分配一个函数（所有元素都具有类'crop-img'），第二个是触发所选元素的click事件（id ='imageX'的元素） 'X'是计数器的当前值。）

而不是函数名称，您可以改为内联函数：

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

这为具有id ='bigImage'的元素的click事件指定了未命名的内联函数，这是您想要提取图像的位置。将代码放在那里将显示图像，它将在单击大图像时运行。

例如，如果您想要实际转到图像，就像在html示例中那样，将此行放在那里：

window.location.href = "someHrefHere";

如果你想知道当前bigImage的src，可以用jquery抓取它：

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

你可以从那里把它放在一起。

快乐的编码！

Answer 2

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

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

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

如何访问幻灯片的当前图片来源？

2 个答案: