如何爲我的滑塊添加按鈕？

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>