0

嗨，我正在尝试为我的网页制作幻灯片，但无法正常工作。这是我第一次使用 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);
})

感谢您的帮助//安东

4

3 回答 3

2

我向你解释，我会更改所有图像的 css，但首先使用 display:none，因为 '.hide' 和 '.show' 会更改显示，因此您无法显示已经显示的内容。

因此，我将在 JFiddle为您举一个 Slider 如何工作的示例：

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：尽量不要只用数字命名您的ID。

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

于 2013-05-11T14:37:56.347 回答
0

安东，

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

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

毫不费力地把它弄起来。希望这可以帮助。

乔什

于 2013-05-11T14:18:44.587 回答
0

我已经为你整理了一个 jsfiddle：http: //jsfiddle.net/XexmW/

您的标记/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 浏览器兼容。

于 2013-05-11T14:50:02.867 回答