将数组值传输到图像源

时间:2013-08-01 23:04:20

标签: javascript jquery

我正在尝试获取每个列表项的链接值,并将它们循环到我的.skater_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]);
            };
        });

1 个答案:

答案 0 :(得分:0)

我认为你正在寻找一个取代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++;
 });