单击图像淡出并替换为新图像淡出

Question

我有一个像这样的图像列表：

<div class="new-slider">
<ul>
    <li><img src="1.png" alt="1" /></li>
    <li><img src="2.jpg" alt="2"/></li>
    <li><img src="3.jpg" alt="3"/></li>
    <li><img src="4.png" alt="4"/></li>
    <li><img src="5.jpg" alt="5"/></li>
    <li><img src="6.png" alt="6"/></li>
    <li><img src="7.jpg" alt="7"/></li>
    <li><img src="8.jpg" alt="8"/></li>
    <li><img src="9.png" alt="9"/></li>
    <li><img src="10.jpg" alt="10"/></li>
</ul>
</div>

我想从10显示5个图像，当我点击它们中的任何一个时，它会淡出并淡化新图像。总是需要显示5张图片。这可以通过jQuery，或任何滑块或图库可以做到这一点？