javascript - 如何在 jquery 中单击特定的 list_item 时显示特定的图像？-6ren

javascript - 如何在 jquery 中单击特定的 list_item 时显示特定的图像？

转载作者：太空宇宙更新时间：2023-11-04 03:49:44

我设计了一个图像 slider 。此 slider 会自动很好地滑过图像。但我希望在单击下方 div(所谓的圆形按钮)中的特定列表项时也显示特定图像。

也就是说，即使 slider 显示队列中的第 5 个图像，如果我按下第 2 个列表项，应该显示该序列的第 2 个图像，并且在此 slider 之后应该再次正常继续。我再次单击返回 1，它应该显示第一个图像并且 slider 再次正常滚动。怎么做？

这是我的代码片段。

我哪里做错了？

<!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
    {
        //
    }

    .shadow_div
    {
        //
    }

    .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">

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

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

        var count = 2;

        setInterval(function () {
            $(("#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;
            } else {
                count = count + 1;
            }
        }, 5300);

        $(".Round_Buttons li").click(function () {
            var id_temp = this.id.charAt(0);
            $("my_image_slider #id_temp").show("fade", 1000);
        });
    });


</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>

最佳答案

你不需要在圆形按钮上手动显示目标图像click

只需将您的 count 变量重置为该值，并让 setInterval 函数显示它。

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

关于javascript - 如何在 jquery 中单击特定的 list_item 时显示特定的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23572915/

文章推荐： linux - XULrunner 未运行

文章推荐：与删除 bst 函数中的指针混淆

文章推荐： linux - 如何更新Matlab共享库？

文章推荐： c - 我的二进制搜索实现有什么问题？

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 jquery 中单击特定的 list_item 时显示特定的图像？