Javascript 试图用jQuery制作幻灯片，但可以'；我不能让它工作

嗨，我正在尝试为我的网页制作幻灯片，但我无法使其工作。这是我第一次使用jQuery，我也不太擅长js。有人能看出我做错了什么吗？ 这是我的html、css和js代码

HTML

Javascript

$(document).ready(function()
{
    $('#1').show("fade",2000);
    $('#2').delay(500).hide("slide", {direction:"left"}, 500);
    var sc=$(".slider img").size();
    var count=2;

    setInterval(function(){
    $("#1"+count).show("slide", {direction:"right"}, 500);
    $("#2"+count).delay(500).hide("slide", {direction:"left"}, 500);
    if(count == sc){
        count=1;
    }else{
        count=count+1;
    }
    }, 6500);
})

var cont = 1;

setInterval(function () { //Make an action repeat each 1000 ms
    $("#image" + cont).hide("slide", {direction: "right"}, 500); //Go out
    if (cont == 3) { //To repeat the complete cycle
        cont = 1;
    } else {
        cont++;
    }
    $("#image" + cont).show("slide", {direction: "left"}, 500);  //Go in
}, 1000); //The 1000 ms

谢谢你的帮助//Anton

Anton

不确定你对幻灯片的要求是什么，但也许你可以使用Twitter引导的幻灯片

把它拿起来很容易。希望这有帮助

---

Josh

我向您解释，我会更改所有图像的css，但第一个是显示：无，因为“.hide”和“.show”会更改显示，所以您不能显示已经显示的内容

因此，我将给您一个滑块如何工作的示例：

HTML

Javascript

$(document).ready(function()
{
    $('#1').show("fade",2000);
    $('#2').delay(500).hide("slide", {direction:"left"}, 500);
    var sc=$(".slider img").size();
    var count=2;

    setInterval(function(){
    $("#1"+count).show("slide", {direction:"right"}, 500);
    $("#2"+count).delay(500).hide("slide", {direction:"left"}, 500);
    if(count == sc){
        count=1;
    }else{
        count=count+1;
    }
    }, 6500);
})

var cont = 1;

setInterval(function () { //Make an action repeat each 1000 ms
    $("#image" + cont).hide("slide", {direction: "right"}, 500); //Go out
    if (cont == 3) { //To repeat the complete cycle
        cont = 1;
    } else {
        cont++;
    }
    $("#image" + cont).show("slide", {direction: "left"}, 500);  //Go in
}, 1000); //The 1000 ms

这是非常评论，我认为它应该是对你有用的。 还有另一种方法，选择所有图像元素或使用“imageSlider”类选择所有元素，但与我向您展示的方法相比，理解起来要复杂得多。 我希望它对你有用

补丁

注：尽量不要用数字来命名你的身份证

---

PS2：这些图像不是我的，我是从谷歌图像中获取的。

我为你准备了一个JSFIDLE：

您的标记/css/js存在一些问题

• img标签不需要有一个关闭标签-我不确定它是否会被所有浏览器理解。改用

• 在html中仍然有一个onload函数调用

• “#1”+count

  不会将1和count相加，然后将其附加到#。如果

  count=1

  那么它会给你

  “#11”

• 当我到处玩的时候，我只能让图像很好地对接，如果它们有位置：绝对

这是我的改动：

html

  <div class="slider">
      <img id="1" src="http://i.telegraph.co.uk/multimedia/archive/02422/burger_2422297b.jpg" border="0" alt="food1" />
      <img id="2" src="http://i.telegraph.co.uk/multimedia/archive/02443/shoppingbasket_2443279b.jpg" border="0" alt="food2" />
      <img id="3" src="http://o-food.co.uk/wp-content/uploads/O-food-photos-overview-161.jpg" border="0" alt="food3" />
  </div>

Javascript

$(document).ready(function()
{ 
    $('#1').show();

    var sc=$(".slider img").size();

    var count=1;
    var lastCount = 0;

    setInterval(function(){

        lastCount = count;

        if(count == sc){
            count=1;
        }else{
            count++;
        }        

        $("#"+count).show("slide", {direction:"right"}, 500);
        $("#"+lastCount).hide("slide", {direction:"left"}, 500);

    }, 1000);
})

---

话虽如此，如果您可以使用现有的库或jQuery插件，那么它可能会更稳定，并且与x浏览器兼容。

body标签表示加载页面时会运行“slider”功能。那是什么函数？函数在javascript代码中。

  <div class="slider">
      <img id="1" src="http://i.telegraph.co.uk/multimedia/archive/02422/burger_2422297b.jpg" border="0" alt="food1" />
      <img id="2" src="http://i.telegraph.co.uk/multimedia/archive/02443/shoppingbasket_2443279b.jpg" border="0" alt="food2" />
      <img id="3" src="http://o-food.co.uk/wp-content/uploads/O-food-photos-overview-161.jpg" border="0" alt="food3" />
  </div>

    .slider
{
    overflow:hidden;
}

.slider img
{
    position:absolute;
    width:230px;
    height:205px;
    display:none;
    left:0;
    top:0;
}

$(document).ready(function()
{ 
    $('#1').show();

    var sc=$(".slider img").size();

    var count=1;
    var lastCount = 0;

    setInterval(function(){

        lastCount = count;

        if(count == sc){
            count=1;
        }else{
            count++;
        }        

        $("#"+count).show("slide", {direction:"right"}, 500);
        $("#"+lastCount).hide("slide", {direction:"left"}, 500);

    }, 1000);
})