JQuery滑块与表和图像

时间:2015-07-28 11:13:04

标签: javascript jquery html image html-table

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

Sub MAIN()
    Dim rng As Range, CellIsNogood As Boolean
    Set rng = Application.InputBox(Prompt:="Enter range", Type:=8)
    Call ErrorCheck(rng, CellIsNogood)
    If CellIsNogood Then
        MsgBox "error in range"
    End If
End Sub

Sub ErrorCheck(r As Range, b As Boolean)
    Dim rr As Range
    b = False
    For Each rr In r
        If IsError(rr.Value) Then
            b = True
        End If
    Next rr
End Sub

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

如果您不想使用任何插件,请尝试使用这个简单的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>