试图用jQuery制作幻灯片，但无法让它工作

嗨，我想为我的网页做一个幻灯片，但我不能让它工作。这是我第一次使用jQuery，并且我也不擅长js。有人可以看到我做错了什么吗？这是我的html，css和js代码。试图用jQuery制作幻灯片，但无法让它工作

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

感谢您的帮助//安东

来源

2013-05-11 Anton Parment

body标签表示在页面加载时有一个“滑块”功能正在运行。那是什么功能？ – boisvert 2013-05-11 14:16:57

该函数在JavaScript代码中。 – 2013-05-11 16:31:37

安东，

不知道你对幻灯片的要求是什么，但也许你可以使用Twitter Bootstrap的幻灯片。

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

它毫不费力地得到它。希望这可以帮助。

乔希

来源

2013-05-11 14:18:44

我解释你，我会改变所有图像的CSS，但先用显示：无，因为“.hide”和“.show”更改显示，这样你就可以不显示的东西，已经显示。

所以我会给你一个滑块可能是如何工作的一个例子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：尽量不要使用数字来命名您的ID。

PS2：图像不是我的，我从谷歌图像中拿走它。

来源

2013-05-11 14:37:56 Patchiyama

伊夫放在一起的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-11 14:50:02

试图用jQuery制作幻灯片，但无法让它工作

回答

相关问题