jquery - 在每张图片上显示播放按钮和时间

Question

我正在尝试在图像上显示播放按钮和时间 我在单个页面上有多个图像。 我的问题是播放按钮和时间只显示在左上角，但它应该在每张图片上显示适当的时间和播放按钮。 我在这里只发布了一个代码。

 <div>
         Good Song
    </div>
   <div style="padding-bottom: 5px;">
   <pre>A.R. Rahman is the only Indian composer to have Academy Award to his credit. He has redefined popular music in India and given it an international face. Listen to some of his best compositions with this audio jukebox.

    Song Listing:
    00:02 - Rangeela Re by Asha Bhosle, Aditya Narayan
    05:35 - Taal Se Taal by Alka Yagnik, Udit Narayan
    11:42 - O Bhavre by Asha Bhosle, Yesudas
    17:50 - Telephone by Kavita Krishnamurthy, Hariharan 
    24:09 - Muqabala Muqabala by Swarnalatha, Mano
    29:30 - Tanha Tanha Yahan Pe Jeena by Asha Bhosle
    35:01 - Ni Main Samajh Gayi by Richa Sharma, Sukhwinder Singh
    39:24 - Jogiya Jogiya by Alka Yagnik, Udit Narayan
    45:03 - Piya Haji Ali by A.R. Rahman, Srinivas, Kadar Gulam Mustafa, Murtujha Gulam Mustafa
    51:42 - Urvashi Urvashi by A.R. Rahman, Shankar, Noel
    57:22 - Hai Rama by Swarnalatha, Hariharan
    1:04:04- Ishq Bina Ishq Bina by Anuradha Sriram, Sujatha, A.R. Rahman, Sonu Nigam</pre>
  </div>
 <img src="http://smsiland.com/img/video/small/002481eyrdqx3bo4_14_l7ntvw7ih6139019_sm.jpg" class="video-image"/>
 <img src="http://png-2.findicons.com/files/icons/2338/reflection/128/button_play.png"   class="play-video-image" />
   <span class="play-time">2:30</span>

我的CSS是

.video-image{
    position:relative;  
}
.play-video-image{
    position:absolute; top:210px; left:60px
}
.play-time{
    position:absolute;
    top:230px; 
    left:310px;
    background-color:#e6e6e6
}

如何解决这个问题。

Answer 1

完整代码如下:

<div>Good Song</div>
<div style="padding-bottom: 5px;"> <pre>A.R. Rahman is the only Indian composer to have Academy Award to his credit. He has redefined popular music in India and given it an international face. Listen to some of his best compositions with this audio jukebox.

    Song Listing:
    00:02 - Rangeela Re by Asha Bhosle, Aditya Narayan
    05:35 - Taal Se Taal by Alka Yagnik, Udit Narayan
    11:42 - O Bhavre by Asha Bhosle, Yesudas
    17:50 - Telephone by Kavita Krishnamurthy, Hariharan 
    24:09 - Muqabala Muqabala by Swarnalatha, Mano
    29:30 - Tanha Tanha Yahan Pe Jeena by Asha Bhosle
    35:01 - Ni Main Samajh Gayi by Richa Sharma, Sukhwinder Singh
    39:24 - Jogiya Jogiya by Alka Yagnik, Udit Narayan
    45:03 - Piya Haji Ali by A.R. Rahman, Srinivas, Kadar Gulam Mustafa, Murtujha Gulam Mustafa
    51:42 - Urvashi Urvashi by A.R. Rahman, Shankar, Noel
    57:22 - Hai Rama by Swarnalatha, Hariharan
    1:04:04- Ishq Bina Ishq Bina by Anuradha Sriram, Sujatha, A.R. Rahman, Sonu Nigam</pre>

</div>
<div class="video-image">
    <img src="http://smsiland.com/img/video/small/002481eyrdqx3bo4_14_l7ntvw7ih6139019_sm.jpg">
     <div class="play-video-image">
    <img src="http://png-2.findicons.com/files/icons/2338/reflection/128/button_play.png" class="play-video-image">
         </div>
        <span class="play-time">2:30</span>
</div>

和CSS:

.video-image {
    position:relative;
}
.play-video-image {
    position:absolute;
    top:70px;
    left:60px
}
.play-time {
    position:absolute;
    top:230px;
    left:310px;
    background-color:#e6e6e6
}