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

Question

Hi i am trying to make a slideshow for my webpage but i can't make it work. 嗨，我想为我的网页制作幻灯片，但我不能让它工作。 It is my first time using jQuery and im not so good at js either. 这是我第一次使用jQuery，我也不是很擅长js。 Can someone see what i have done wrong? 谁能看到我做错了什么？ Here are my html, css and js codes. 这是我的html，css和js代码。

HTML 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 CSS

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

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

Javascript 使用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);
})

Thanks for helping//Anton 谢谢你帮助//安东

Answer 1

I explain you, I would change all the images' css but the first with display:none because '.hide' and '.show' changes the display, so you can't show something that is already showed. 我解释你，我会改变所有图像的'css但是第一个用display：none因为'.hide'和'.show'改变显示，所以你不能显示已经显示的东西。

So I will give you an example here JFiddle of how a Slider could work: 所以我将在这里给你一个关于Slider如何工作的JFiddle的例子：

HTML 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 CSS

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

Javascript 使用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

It is very commented and I think that it should be useful for you. 这是非常评论，我认为它应该对你有用。 There is another way to do it, selecting all image elements or all the elements with the class "imageSlider", but it is way more complicated to understand compared with the way that I have showed you. 还有另一种方法，选择所有图像元素或所有元素与“imageSlider”类，但与我向您展示的方式相比，理解起来更复杂。 I hope it will useful to you. 我希望它对你有用。

Patch 补丁

PS: try to don't name your id with just a numbers. PS：尽量不要用数字命名你的id。

PS2: the images aren't mine, I took it from google images. PS2：图像不是我的，我从谷歌图片中取出。

Answer 2

Anton, 安东，

Not sure what your requirements are for the slideshow, but maybe you could use Twitter Bootstrap's slideshow. 不确定您对幻灯片的要求是什么，但也许您可以使用Twitter Bootstrap的幻灯片。

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

It's effortless to get it up. 它很容易搞定。 Hope this helps. 希望这可以帮助。

Josh 玩笑

Answer 3

Ive put together a jsfiddle for you : http://jsfiddle.net/XexmW/ 我为你准备了一个jsfiddle： http ： //jsfiddle.net/XexmW/

There are a few issues with your markup/css/js. 您的markup / css / js存在一些问题。

img tags dont need to have a close tag - im not sure it will be understood by all browsers. img标签不需要有一个关闭标签 - 我不确定它会被所有浏览器理解。 Use <img src="" /> instead. 请改用<img src="" /> 。
you still have an onload function call in your html 你的html中仍然有一个onload函数调用
"#1"+count wont sum 1 and count, then append it to #. "#1"+count不会将1和计数相加，然后将其追加到＃。 if count = 1 then it would give you '#11' 如果count = 1那么它会给你'#11'
when i was playing around, i could only get the images to butt up against each other nicely if they have position:absolute 当我在玩耍的时候，如果他们有位置，我只能很好地对抗彼此。绝对

Here are my alterations: 这是我的改动：

html 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 CSS

    .slider
{
    overflow:hidden;
}

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

Javascript 使用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);
})

Having said all that - if you can use an existing library or jQuery plugin, its likely to be more stable and x-browser compatible. 说了这么多 - 如果你可以使用现有的库或jQuery插件，它可能更稳定和x浏览器兼容。

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

问题描述

3 个解决方案

解决方案1
2 2013-05-11 14:37:56

解决方案2
0 2013-05-11 14:18:44

解决方案3
0 2013-05-11 14:50:02

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

问题描述

3 个解决方案

解决方案1 2 2013-05-11 14:37:56

解决方案2 0 2013-05-11 14:18:44

解决方案3 0 2013-05-11 14:50:02

解决方案1
2 2013-05-11 14:37:56

解决方案2
0 2013-05-11 14:18:44

解决方案3
0 2013-05-11 14:50:02