jquery函数的循环不起作用

jquery函数的循环不起作用,jquery,Jquery,我想连续滑动图像,但它不起作用它的幻灯片只有一次图像不再重复我该怎么做才能更正代码当我给出图像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

我想连续滑动图像,但它不起作用它的幻灯片只有一次图像不再重复我该怎么做才能更正代码当我给出图像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>

函数滑块2(){
$(“.slider2#4”).show(“淡入淡出”,500);
$(“.slider2#4”).delay(5500).hide(“slide”,{direction:“right”},500);
var sc=$(“.slider2 img”).size();
var计数=5;
setInterval(函数(){
$(“.slider2#”+count).show(“slide”{direction:“left”},500);
$(“.slider2#”+count).delay(5500).hide(“slide”,{direction:“right”},500);
如果(计数=sc){
计数=4;
}
否则{
计数=计数+1;
}
}, 6500);
}
.幻灯片2
{
/*宽度:100px;
高度:100px*/
溢出:隐藏;
/*保证金:30像素自动;
背景图片:url(images/img.png);
背景重复:无重复;
背景位置:顶部*/
}
/*.影子
{
背景图片:url(images/img.png);
背景重复:无重复;
背景位置:顶部;
宽度:100px;
高度:100px;
}*/
.滑块2 img
{
/*宽度:100px;
高度:100px*/
显示:无;
}

我重新编写了您的代码,使其更干净、更干燥。这应该适用于您当前的HTML

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();
.slider2 img:first-of-type {
  display: block;
}