Question

我设计了一个滑动图片的图片滑块。但我希望它也能显示与相应按钮用户点击相关联的特定图像，即，如果用户点击第三个按钮，它将显示第三个图像，然后它应该正常滑动。我已编码，但它没有按预期工作，实际上根本没有工作。谁能指出我在哪里做错了？并帮我解决这个问题？

<!DOCTYPE html>
<html>
<head>

<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<style type="text/css">

    .mySlider
    {
        width:800px;
        height:480px;
        overflow:hidden;
        margin:40px auto;
        background-image:url(Images/Loading.gif);
        background-repeat:no-repeat;
        background-position:center;
        background-color:#fff;
    }

    .shadow_div
    {
        background-image:url(Images/shadow.png);
        background-repeat:no-repeat;
        background-position:top;
        width:800px;
        height:30px;
        margin:-39px auto;

    }

    .mySlider img
    {
        width:800px;
        height:480px;
        display:none;

    }

    .Parent_Slider > a
    {
        text-decoration:none;
        font-weight:bold;
        width:32px;
        height:32px;
        position:absolute;
        top:45%;
        text-indent:-9999px;
        display:block;
         border:1px solid white;
    }

    .Next_Class
    {
        right: 282px;
        background-image: url(Images/rightarrow.jpg);
    }

    .Prev_Class
    {
        left:282px;
        background-image:url(Images/leftarrow.jpg);
    }

    ul.Round_Buttons
    {
        position:relative;
        left:35%;
        top:5px;
        text-decoration:none;
        list-style-type:none;
        text-indent:-9999px
    }

   ul.Round_Buttons li
   {
       float:left;
       background-color:white;
       margin:1px 5px;
       padding:0px 7px;
       border-radius:50%;
       border-width:1px;
       border:1px solid #3610a5;
       cursor:pointer;
       box-shadow:1px -1px 3px 1px #3610a5;
       transition:all 1s ease-in-out;
       -moz-transition:all 1s ease-in-out;
       -webkit-transition:all 1s ease-in-out;

   }


</style>

<script type="text/javascript">

    var count = 1;
    var temp_count = 0;
    var _tempClicked = false;

    $(document).ready(function () {
        $(("#my_image_slider>#")+count).show("fade", 1000);
        $(("#my_image_slider>#")+count).delay(3500).hide("slide", { direction: 'left' }, 800);

        var image_count = $("#my_image_slider > img").length;//total number of images

        $(".Round_Buttons li").click(function () {
            temp_count = this.id.charAt(0);
            _tempClicked = true;
        });

        count = count + 1;

        setInterval(function () {
            alert("In setinterval --- " + count);
            $(("#my_image_slider #") + count).show("slide", { direction: 'right' }, 1000);
            $(("#my_image_slider #") + count).delay(3500).hide("slide", { direction: 'left' }, 800);

            if (count == image_count) {
                count = 1;
                alert("In first If -- " + count);

            }
            else if (_tempClicked == true) {
                count = temp_count;
                alert("In Else If " + count);
            }
            else {
                count = count + 1;
                alert("In else -- " + count);
            }
        }, 5300);

    });



</script>
</head>

<body>
<div class="Parent_Slider">
    <div id="my_image_slider" class="mySlider">
        <img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
        <img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
        <img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
        <img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
        <img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
    </div>
    <a href="#" class="Next_Class">Next</a>
    <a href="#" class="Prev_Class">Prev</a>
</div>
    <div class="shadow_div" >
        <ul class="Round_Buttons">
            <li id="1_Round_Buttons"><a href="#">1</a></li>
            <li id="2_Round_Buttons"><a href="#">2</a></li>
            <li id="3_Round_Buttons"><a href="#">3</a></li>
            <li id="4_Round_Buttons"><a href="#">4</a></li>
            <li id="5_Round_Buttons"><a href="#">5</a></li>
        </ul>
    </div>  
</body>
</html>

Answer 1

您的代码中有错误：

$(("#my_image_slider>#")+count)

这种类型的选择器是错误的，而是使用这种类型的选择器

（你应该删除内括号）：

$("#my_image_slider>#" + count )

注意：jQuery选择器应该是一个字符串。

Answer 2

在你的点击功能中，它设置一个稍后由setInterval拾取的值，因此它似乎不会立即起作用。在setInterval中检查后，_tempClicked也不会重置为false，这样您就不会在第一个用户点击后看到用户点击。

对于即时的UI响应，您可以尝试这样的事情......

<script type="text/javascript">

    var count = 1;
    var _tempClicked = false;

    $(document).ready(function () {

        var image_count = $("#my_image_slider > img").length;//total number of images

        increment_counter = function(){
            if (count == image_count) {
                count = 1;
            }
            else {
                count = count + 1;
            }
        };

        doslide = function(){
            $("#my_image_slider>#"+count).show("fade", 1000);
            $("#my_image_slider>#"+count).delay(3500).hide("slide", { direction: 'left' }, 800);
            increment_counter();
        };

        doslide();

        setInterval(function () {
            doslide();          
        }, 5300);


        $(".Round_Buttons li").click(function () {
            count = parseFloat(this.id.charAt(0));
            // hide currently visible image
            $('#my_image_slider').children().each(function(index,obj) {
                if( $(obj).css("visibility") != "hidden"){
                    $(obj).hide();  
                };
            });
            $("#my_image_slider>#"+count).show();
        });


    });



</script>

jQuery Image滑块无法正常工作

2 个答案: