Question

我只是乱搞并试图立即学习javascript。基本上，我建立了一个中间有一张大图片的网站，你按下上一个或下一个按钮，它会相应地切换。

现在我想按下一个按钮，然后转到特定的图像。

我目前有3个项目包含 <div class="slider">和其中一个图片在“滑块”类中有自己的<div class="goat">。

现在我只知道如何使用：

var currentSlide = $('.slide').last();

我如何制作而不是last()，它会选择山羊图像？

Answer 1

有许多方法可以做到这一点。就个人而言，我根本不会在标记中包含所有图像。由于您一次只显示一个，因此不需要它。相反，我会使用一个网址数组，并根据需要将它们设置为单个图像标记。

有用的文档：

一个简单的例子可能是：

＆＃13;

// create an array of image urls
var images = [
  'http://avatarmaker.net/free-avatars/avatars/various_227/yellow_duck_avatar_100x100_48557.jpg',
  'http://www.avatarsdb.com/avatars/ned_flanders.gif',
  'http://www.sclakes.com/forums/download/file.php?avatar=853.png',
  'http://avatarmaker.net/free-avatars/avatars/cartoons_229/the_simpsons_254/mr_burns_sneaky_avatar_100x100_14710.gif',
  'http://www.avatarsdb.com/avatars/super_mario_panic.gif',
  ];
// create a global variable to keep up with the currently displayed image index
var current=0;

  
/*  handle prev and next buttons */
  
  
  // bind a function to the change event of all buttons with the class `change`
  // make sure botht the prev and next buttons have that calss
$('.change').click(function(){
    // when one of the buttons is clicked, check if the button also has the class `next` and act accordingly
    if($(this).hasClass('next')){
        // next line is a ternary expression
        // it basically says - check if adding 1 to current will make curent greater than the length of the images array 
        // if so, reset current to 0 
        // otherwise increment current by one
        current= current+1 > images.length-1 ? 0 : current+1;
        
    }
    else{
        // same as before except - check if subtracting one from current will make curent less than 0 
        // if so, reset the last image in the array 
        // otherwise decrement current by one
        current= current-1 < 0 ? images.length-1 : current-1;
        
    }
    // set the src attribute of the image tag to the url stored at the `current` index of the image array
    $('#myImage').attr('src',images[current])
});






/*  handle selecting specific images if you want a button for every possible image*/


$('.changeToIndex').click(function(){
    // get the index of the clicked button
    var current = $('.changeToIndex').index($(this));
  
    // set the src attribute of the image tag to the url stored at the `current` index of the image array
    $('#myImage').attr('src',images[current]); 
  
});





/*  handle selecting specific images if you DONT want a button for every possible image*/


$('.changeToImage').click(function(){
    // get the `data-to-image` value of the clicked button
    var current = $(this).data('to-image');
  
    // set the src attribute of the image tag to the url stored at the `current` index of the image array
    $('#myImage').attr('src',images[current]); 
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="myImage" src="http://avatarmaker.net/free-avatars/avatars/various_227/yellow_duck_avatar_100x100_48557.jpg" alt="" height="100" width="100"><br><br>


<button class="change prev">Previous</button><button class="change next">next</button>


<br><br>
<button class="changeToIndex">Image 1 </button>
<button class="changeToIndex">Image 2 </button>
<button class="changeToIndex">Image 3</button>
<button class="changeToIndex">Image 4</button>
<button class="changeToIndex">Image 5</button>


<br><br>
<button class="changeToImage" data-to-image="3"> Mr. Burns </button>
<button class="changeToImage" data-to-image="1"> Flanders </button>

＆＃13;

如何在javascript中调用特定的列表项

1 个答案:

有用的文档：