如何为滑块添加按钮

Question

所以我有这个HTML:

<div id="itemlist">  
    <img src="images/img1.jpg" id="image1">  
    <img src="images/img2.jpg" id="image2">
    <img src="images/img3.jpg" id="image3">
</div>
<div id="itemdescription">  
    <span data-for="image1">A</span>  
    <span data-for="image2">B</span>
    <span data-for="image2">C</span> 
</div>

带有以下JS文件：

$(document).ready(function() {
  //Initiliaze
  var itemList, item, className, thisItem, newOrder, itemDesc, desc;
  itemList  = $('#itemlist');
  item      = itemList.children('img');
  itemDesc  = $('#itemdescription');
  desc      = itemDesc.children('span');
  //Add class name for each item
  item.each(function(index) {
    className  = 'item-' + index;
    $(this).addClass(className).attr('data-order', index);
});
  //Show first item description
  desc.filter(':first-child').fadeIn();
  //On clicked fire animation
  item.on('click', function() {
    thisItem  = $(this);
    thisOrder = parseInt(thisItem.attr('data-order')) - 1;
    thisItem.addClass('show');
    //Reorder item position
    item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() { 
      thisItem.removeClass().addClass('item-0').attr('data-order', '0');
      //Show selected item description
      desc.hide();
      desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
    });
    //Move siblings items backward
    window.setTimeout(function () {    
      for(var i = thisOrder; i >= 0; i--) {
        //Reorder item position
        movedItem = item.filter('[data-order=' + i + ']');
        newOrder  = parseInt(movedItem.attr('data-order')) + 1;
        className = 'item-' + newOrder;
        //Move them with transition
        movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);
        //Remove their transition
        item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
          item.removeClass('transition');
        });
      }  
    }, 500);
  });
});

这里还有CSS：

#itemdescription {  
    position: relative;  
    width: 415px;  
    margin: 0; 
    padding: 0 20px; 
}  
#itemdescription span {  
    display: none;
    line-height: 1.7em;  
}  
#itemdescription h2 {  
    font-size: 270%;
    line-height: 1.3em;  
    margin: 0;
} 
#itemlist {  
    display: block;  
    width: 450px; 
    top: -105px;
    right: -30px;
    position: relative;  
    transform-style: preserve-3d;
}  
#itemlist img {  
    position: absolute;  
    cursor: pointer;  
    left: 0;
    box-shadow: 0px 15px 50px rgba(0,0,0,0.4);  
}  
#itemlist img:hover {  
    top: -5px;  
}  
#itemlist img.item-0 {  
    z-index: 4;
    border: 5px solid #000;   
}  
#itemlist img.item-1 {  
    z-index: 3;  
    left: +20px;
    top: -20px; 
    border: 5px solid #fff;
}  
#itemlist img.item-2 {  
    z-index: 2;  
    left: +40px;
    top: -40px;  
}
.transition {  
    transition: 0.5s ease-out;  
}  
.show {  
    animation: show 1s linear;  
}  
@keyframes show{  
25% {  
    left: -50px;
    top: +10px;
}  
50% {  
    z-index: 5;  
    left: -75px;
    top: +20px;
}
75% {  
    z-index: 5;  
    left: -20px;
    top: +30px;
} 
100% {  
    z-index: 5;  
    left: 0px;
    top: +3px;
}  
}

现在我想在滑块下添加3个与3个图像相对应的单选按钮，这样当我单击这些按钮时，图像和数据之间就会发生滑动。在我点击图像并滑动的那一刻，我也希望能够点击按钮并滑动图像。

我也很着急，所以如果有人能尽快给我一个解决方案，那就太好了。

提前感谢各位！

Answer 1

类似的东西？Fiddle

我建议你把它包装成一些函数。

$("#buttons input").change(function() {
  $("#"+this.value).click().show();
}); 
<div id="buttons">
    <input type="radio" name="slider" value="image1"><br/>
    <input type="radio" name="slider" value="image2"><br/>
    <input type="radio" name="slider" value="image3"><br/>
</div>