将数组值传输到图像源

Transfer array values to image source

本文关键字：图像 传输 数组 值传      更新时间：2023-09-26

我正在尝试获取每个列表项上的链接值，并将它们循环到我的.s滑橇_large图像src中。

这是HTML:

<html>
<body>
  <div>
    <ul id="skater_multiview">
      <li><a href="skater1_big.jpg"><img src="skater1-thumb.jpg" /></a></li>
      <li><a href="skater2_big.jpg"><img src="skater2-thumb.jpg" /></a></li>
      <li><a href="skater3_big.jpg"><img src="skater3-thumb.jpg" /></a></li>
    </ul>
  </div>
  <div>
    <img class="skater_large" src="empty.jpg" />
  </div>
  </body>
  </html>

和js:

        $('#skater_multiview li a').each(function(click) {
        var cardboard = new Array();
        for(i=0; i<$('#skater_multiview li a').length; i++) {
            // gathering all skater carousel list link values
            var pro_link = $('#skater_multiview li a').eq(i).attr('href');
            // adding hrefs to array
            cardboard.push(pro_link);
            // pushing cardboard array values into img src
            $('.skater_large').attr('src',cardboard[i]);
            };
        });

我认为您正在寻找一个替换src的点击事件。。这应该做

var cardboard = [];
 $('#skater_multiview li a').each(function (index) {
     // gathering all skater carousel list link values
     var pro_link = $(this).attr('href');
     // adding hrefs to array
     cardboard.push(pro_link);
     // pushing cardboard array values into img src
     $('.skater_large').attr('src', cardboard[i]);
 });
// Attach a click event for slater when clicked
// gets the next image
var curr;
$('.skater_large').click(function () {
     // Get the href attribute
    var index;
    if(curr)
        index = curr >= cardboard.length ? 0 ? curr;
     else
         curr = 0;
     $('.skater_large').attr('src', cardboard[curr]);
        curr++;
 });
相关文章：