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>

如何为滑块添加按钮？

1 个答案: