带有表格和图像的 JQuery 滑块答案

【问题标题】：JQuery Slider with table and image带有表格和图像的 JQuery 滑块
【发布时间】：2015-10-18 21:50:00
【问题描述】：

我是 jQuery 的新手。所以我不知道如何完美解决这个问题，但是这里我有一排图片，我需要让它像滑块一样在无限循环中运行。搜索了很多地方，但不得不失望地返回。我该如何完成这项工作？

<table id="boxes" style="border: 1px solid #666;">
   <tr>
       <td>
           <img src="images/image1.jpg" width="173" height="110" class="imgborder" />           
           <img src="images/image2.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image3.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image4.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image5.jpg" width="173" height="110" class="imgborder" />    
           <img src="images/image6.jpg" width="173" height="110" class="imgborder" />   
           <img src="images/image7.jpg" width="173" height="110" class="imgborder" />
       </td>
   </tr>
</table>

【问题讨论】：

你为什么不能使用一些 3rd 方插件呢？
嗨，欢迎来到 StackOverflow。向我们展示您迄今为止尝试过的方法，因此我们不会提供您已经尝试过且对您无效的解决方案。向我们展示您的 jQuery 代码。谢谢。
感谢您的回复，我终于找到了一个插件，Slick.. 就是这样，我对这个部分很陌生，这一切都很难理解

标签： javascript jquery html image html-table

【解决方案1】：

如果你不想使用任何插件，那么试试这个简单的 jQuery Slider

<style type="text/css">
    #boxes img {
        display: none;
    }

    #boxes .active {
        display: block !important;
    }
</style>

<table id="boxes" style="border: 1px solid #666;">
    <tr>
        <td> <img src="res/i/img.jpg" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/ajax-loader.gif" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/yellowspike.gif" width="173" height="110" class="imgborder" /> </td>
    </tr>
</table>
<script src="res/js/rvmp_admin/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#boxes img:first").addClass('active');
        setInterval(function() {
            InitializeSlider();
        }, 3000);

        function InitializeSlider() {
            if($("#boxes img").hasClass('active')) {
                var nextImg;
                if(($("#boxes .active").index() + 1) == $("#boxes img").length) {
                    nextImg = $("#boxes img:first");
                } else {
                    nextImg = $("#boxes .active").next();
                }
                $("#boxes .active").hide("slow").removeClass("active");
                nextImg.addClass('active');
            } else {
                $("#boxes img:first").addClass('active');
            }
        }
    });
</script>

【讨论】：

【解决方案2】：

试试 jQuery 循环。这是我所知道的最简单的。 http://jquery.malsup.com/cycle/

【讨论】：

【解决方案3】：

我认为插件是个好主意。如果您希望图像行像股票行情一样滚动，您可以使用 jQuery SimpleScroll 之类的东西。如果您想要标准幻灯片，可以尝试使用轻量级图像滑块，例如 Nivo Slider

【讨论】：

在 Immensive Google Search 之后，我终于选择了 slick。它完成了。感谢您的支持