Question

您好我正在尝试为我的网页制作幻灯片，但我无法使其正常工作。这是我第一次使用jQuery，我也不是很擅长js。谁能看到我做错了什么？这是我的html，css和js代码。

HTML

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="matsidacss.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
    <script type="text/javascript" src="jul.js"></script>
    <title>Erik'p kokbok</title>
</head>
<body class="jul" onload="slider();">   
      <div class="slider">
        <img id="1" src="Bilder/food1.jpg" border="0" alt="food1"></img>
        <img id="2" src="Bilder/food2.jpg" border="0" alt="food2"></img>
        <img id="3" src="Bilder/food3.jpg" border="0" alt="food3"></img>
      </div>

CSS

    .slider
{
    position:absolute;
    height: 205px;
    width: 230px;
    left: 50%;
    top:10px;
    margin-left:510px;
    overflow:hidden;
}

.slider img
{
    width:230px;
    height:205px;
}

的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);
})

感谢您帮助// @ Anton

Answer 1

我向你解释，我会改变所有图像'css但是第一个用display：none因为'.hide'和'.show'改变显示，所以你不能显示已经显示的东西。

所以我会举一个关于Slider如何工作的例子here JFiddle：

HTML

    <div id="slider">
    <img src="http://avatar.hq-picture.com/avatars/img27/say_cheese_avatar_picture_52454.jpg" id="image1"></img>
    <img src="http://www.animated-gifs.eu/avatars-100x100-dogs/0038.gif" id="image2"></img>
    <img src="http://fc08.deviantart.net/fs39/f/2008/330/0/2/Lfg_avatar_100x100_by_Shadowfang3000.gif" id="image3"></img>
</div>

CSS

img {
    position: absolute;
    display: none;
}
#image1 {
    display: inline;
}

的Javascript

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”类，但与我向您展示的方式相比，理解起来更复杂。我希望它对你有用。

修补程序

PS：尽量不要用数字命名你的身份。

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

Answer 2

安东，

不确定您对幻灯片的要求是什么，但也许您可以使用Twitter Bootstrap的幻灯片。

http://twitter.github.io/bootstrap/javascript.html#carousel

轻松搞定。希望这会有所帮助。

约什

Answer 3

我为你准备了一个jsfiddle：http://jsfiddle.net/XexmW/

您的markup / css / js存在一些问题。

img标签不需要有一个关闭标签 - 我不确定所有浏览器都能理解它。请改用<img src="" />。
你的html中还有一个onload函数调用
"#1"+count不会将1和计数相加，然后将其追加到＃。如果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>

<强> CSS

    .slider
{
    overflow:hidden;
}

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

<强>的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浏览器兼容。

尝试使用jQuery制作幻灯片但无法使其工作

3 个答案: