如何使用 jquery 创建带有导航按钮的幻灯片答案

【问题标题】：How to create a slideshow with navigation button using jquery如何使用 jquery 创建带有导航按钮的幻灯片
【发布时间】：2014-08-22 19:17:31
【问题描述】：

我有以下代码块来实现幻灯片，以便在单击导航按钮时导航不同的内容（列表）。一切都很好，效果很好。但确实我需要一个额外的功能，比如幻灯片应该在页面的负载上运行，并且按钮也可以选择幻灯片的确切位置。我仍然需要这些按钮来浏览我的幻灯片。提前致谢。

标记

<div class="testimony">
    <div class="container">
        <ul class="test-con">
            <li class="current">
               <a class="image-frame" href="">
               <img src="http://placekitten.com/g/100/150"></a>
               <h5>“ My Test Content 1 ”</h5>
               <h6>- Test 1</h6>
            </li>
            <li>
               <a class="image-frame" href="">
               <img src="http://placekitten.com/g/100/150"></a>
               <h5>“My Test Content 2”</h5>
               <h6>- Test 2</h6>
            </li>
            <li>
               <a class="image-frame" href="">
               <img src="http://placekitten.com/g/100/150"></a>
               <h5>“ My Test Content 2 ”</h5>
               <h6>- Test 3</h6>
            </li>
        </ul>
        <ul class="navigator">
            <li class="current"></li>
            <li></li>
            <li></li>
        </ul>
   </div>
</div>

JQuery

$('.navigator li').click(function () {
    var index = $(this).index();
    $(this).addClass('current').siblings().removeClass('current');
    $('.test-con li').hide();
    $('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});

注意：需要动画width 而不是淡入淡出动画。

供参考：CHECK THIS

FIDDLE DEMO

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

jQueryUI 提供了很多工具来个性化 js 代码。无论如何，你为什么不尝试使用已经存在的 js 滑块库呢？

你想要创造的东西可能会随着你想要达到的吸引力成比例地增加:) 我知道http://www.slidesjs.com/，它可以在需要注意的情况下完成相同的工作。

亚历克斯

【讨论】：