Question

HTML文件使用视频播放器并显示图像。 Js文件包含一系列图像和视频。我必须在特定图像上播放特定视频点击。当单击图像[0]时，视频[0]应该播放，同样。我在此div中的所有图像中添加了一个click事件。如何识别人员点击的图像索引，以便我可以将视频阵列中相同索引处的视频的URL（源）分配给我的主视频播放器的src。我在这里做了一些代码

 <html>
 <head>
 <style>
 .leftElement {
float: left;
  }

  .rightElement {
float: right;
  }
  </style>
  </head>
 <body>

  <div class="blocks">

            <div id="showThumbnailDiv" style="height: 250px; width: 480px;
               overflow:scroll; margin-top: 7%; margin-left: 8%;" class="scroll  
               leftElement">    
                       <script src="showdynamicimages.js"></script>
            </div>

            <div id="videoplayer" class="rightElement" style="margin-top: 7%; 
                 margin-right: 8%;">

                     <video id="mainVideo" width="480" height="250" autoplay controls> 
                     </video>
            </div>

    </div>

   <div>position_click</div>

 </body>
 </html>

Js文件是

                    var position_click;
                    var image =[



    "http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/1p/5y/p01p5ygs.jpg",
    "http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg",
     "http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg", 

     "http://thatrandomwebsite.com/uploads/3/2/8/4/3284350/7497257_orig.jpg",   
      "http://justsomething.co/wp-content/uploads/2013/11/33-most-powerful-images-23.jpeg",
     "http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg",
    "http://www.thehindu.com/multimedia/dynamic/01532/THINGSSEE_INTERNET_1532062g.jpg", 
     "http://wpmedia.o.canada.com/2014/04/gv_0402_newspicofday_0011.jpg", 
    "http://www.freelive3dwallpapers.com/wp-content/uploads/2014/03/images-7.jpg"];


         var videos = [
              "uploaded_videos/outro_en.mp4",
              "uploaded_videos/alu_blech_en.mp4",
              "uploaded_videos/alu_guss_en.mp4",
               "uploaded_videos/b_saeule_en.mp4",
               "uploaded_videos/intro_en.mp4"];


       for( var i=0; i<10; i++)
            {    
                 var elem = document.createElement("img");
                 elem.setAttribute("src", image[i]);
                 elem.setAttribute("height", "120");
                 elem.setAttribute("width", "150");
                 elem.setAttribute("alt", "Unable to display Image");
                 elem.setAttribute("class","thumbnail");
                 document.getElementById("showThumbnailDiv").appendChild(elem);
            }

           var image = document.querySelectorAll(".thumbnail");
           for (var i = 0; i < image.length; i++) {

                  image[i].addEventListener('click', clickHandler, false);
             }

          function clickHandler(el) {

                 var mainVideo = document.getElementById("videoplayer");
                 mainVideo.src = videos[0];
              }

请建议我如何在这里继续.. ???

Answer 1

在jQuery中编写相同的代码非常容易。

替换此

var image = document.querySelectorAll(".thumbnail");
for (var i = 0; i < image.length; i++) {
     image[i].addEventListener('click', clickHandler, false);
}

function clickHandler(el) {
       var mainVideo = document.getElementById("videoplayer");
       mainVideo.src = videos[0];
}

带

   $(".thumbnail").click(function(index){
        $('#videoplayer').attr('src', videos[index]);
    });

注意 - 如果您的html中没有jquery文件，请在您的html头部包含jquery库。只需将其粘贴到

中即可

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

这样的东西会获得图像的索引。

<Script>
$("#showThumbnailDiv img").click(function(){
var a = $(this).index();
.....you can now use this var to get the correct video...
});
</script>

Answer 3

根据您所说的内容，您的帖子中缺少的一些信息就是一个例子。为每个图像添加一个id。点击后获取目标的ID并将其用作idx以查找视频。

此外，您应该更新您的js并使用更多jquery，因为您已标记它。 1。

for(var i=0; i<10; i++)
{    
var elem = document.createElement("img");
elem.setAttribute("src", image[i]);
elem.setAttribute("height", "120");
elem.setAttribute("width", "150");
elem.setAttribute("alt", "Unable to display Image");
elem.setAttribute("class","thumbnail");
$(elem).attr("id", "idx_"+i);
document.getElementById("showThumbnailDiv").appendChild(elem);
}

2

      function clickHandler(el) {

             var idx_id = $(el.target).attr('id');

             var mainVideo = document.getElementById("videoplayer");
             mainVideo.src = videos[idx_id.split('_')[1]];
          }

Answer 4

试试这种方式下面的小提琴

$(document).ready(function(){
var image = [
    "http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/1p/5y/p01p5ygs.jpg",
    "http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg",
    "http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg",
    "http://thatrandomwebsite.com/uploads/3/2/8/4/3284350/7497257_orig.jpg",
    "http://justsomething.co/wp-content/uploads/2013/11/33-most-powerful-images-23.jpeg",
    "http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg",
    "http://www.thehindu.com/multimedia/dynamic/01532/THINGSSEE_INTERNET_1532062g.jpg",
    "http://wpmedia.o.canada.com/2014/04/gv_0402_newspicofday_0011.jpg",
    "http://www.freelive3dwallpapers.com/wp-content/uploads/2014/03/images-7.jpg"];


var videos = [
    "uploaded_videos/outro_en.mp4",
    "uploaded_videos/alu_blech_en.mp4",
    "uploaded_videos/alu_guss_en.mp4",
    "uploaded_videos/b_saeule_en.mp4",
    "uploaded_videos/intro_en.mp4"];
var img_output=''
for(var i in image)
{
    img_output+='<img class="thumbnail" src="'+image[i]+'" height="120" width="150"/>';
}
$('#showThumbnailDiv').empty().append(img_output)

$(".thumbnail").click(function(index){
     $('#mainVideo').attr('src', videos[$(this).index()]);
    alert("loading video no "+videos[$(this).index()])
});});

DEMO

如何获取div内部点击的索引。

4 个答案: