Question

我想要连续滑动图像但是它不能正常工作它的幻灯片一旦图像不再重复我应该怎么做才能纠正代码这个代码工作时我给图像ID 1 2 3但不适用于图像ID 4 5 6等等。

<script type="text/javascript">
    function slider2() {
        $(".slider2 #4").show("fade", 500);
        $(".slider2 #4").delay(5500).hide("slide", { direction: "right" }, 500);

        var sc = $(".slider2 img").size();
        var count = 5;

        setInterval(function () {
            $(".slider2 #" + count).show("slide", { direction: "left" }, 500);
            $(".slider2 #" + count).delay(5500).hide("slide", { direction: "right" }, 500);

            if (count == sc) {
                count = 4;
            }
            else {
                count = count + 1;
            }
        }, 6500);
    }
</script>



.slider2
    {
        /*width: 100px;
        height: 100px;*/
        overflow: hidden;
        /*margin: 30px auto;
        background-image: url(images/img.png);
        background-repeat:no-repeat;
        background-position: top;*/
    }

        /*.shadow
    {
        background-image: url(images/img.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 100px;
        height: 100px;
    }*/

        .slider2 img
        {
            /*width: 100px;
            height: 100px;*/
            display: none;
        }
<div align="center">
    <asp:Panel runat="server">
        <table>
            <tr>
                <td class="slider2">
                    <img id="4" src="3.jpg" height="200" width="200" />
                    <img id="5" src="2.jpg" height="200" width="200" />
                    <img id="6" src="4.jpg" height="200" width="200" />
                </td>
            </tr>
            </table>
     </asp:Panel>
 </div>

Answer 1

我重新编写了您的代码，使其更清洁，更干净。这个应该适用于您当前的HTML。

printf()

CSS：而不是使用JS来显示（）你的第一张幻灯片 - 只需使用CSS自动显示它。

function nextSlide (container) {

  // The current slide will always be the only one visible
  // You might want to add animation detection to ensure this
  // if you make it complex
  var current = $('img:visible', container);

  // The function nextAll() gives us all of the img elements
  // that occur after the current
  var next = current.nextAll('img').first();

  // If the current one is the last one, there will be no
  // next img element - so we should check we've got some
  if (next.length<1) {
    // If not, we simply get the first img element
    next = $('img', container).first();
  }

  // Do some show() and hide()
  // You can add complexity here but I've simplified
  // as your main issue appeared to be finding the correct
  // slides to work with
  $(current).hide("fade", 500);
  $(next).show("fade", 500);

}

// It's always a good idea to pass setInterval() to an object.
// That way you can clear it later if needed
slider2interval = {};

// You might consider using a var to pass in the time - as you can
// alter this progamatically, and / or share amongst other sliders etc
slider2time = 3000;

// This is our trigger function where we setInterval
function slider2() {

  // Pick up the containing element so we don't have to keep
  // bogging our script down with selecting known elements
  var container = $(".slider2");

  // Code is cleaner and more DRY if you build a function outside of loops
  // or intervals etc
  slider2interval = setInterval(function () {
    nextSlide(container);
  }, slider2time);

}

// Off we go!
slider2();

循环不起作用的jquery函数

1 个答案: