Jquery幻灯片不起作用答案

【问题标题】：Jquery Slideshow doesn't workJquery幻灯片不起作用
【发布时间】：2014-03-19 21:48:31
【问题描述】：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):


$(document).ready(function(){
 $(currentImage).click(function(){
     $(currentImage).animate();
 });
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
     <div id="image">
         <img src="slide1.jpg" height="360px" width="960px">

     </div>
     <div id="image">
         <img src="slide2.jpg" height="360px" width="960px">

     </div>
     <div id="image">
         <img src="slide3.jpg" height="360px" width="960px"> 
     </div>
</div>   

</div>
</body>
</html>

和 CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,                            pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}              


This is a HTML (with Jquery in it) and a CSS file.

我想要做的是，如果您单击#image，#image 将向左移动 900 像素。但是我有一个问题，因为如果我点击#image，什么都不会发生。

有人可以帮我吗？

附：我来自荷兰，所以如果我的英语不好，我很抱歉。

【问题讨论】：

第一个问题：您有 3 个具有相同 id 的 div。您可以将其转换为 class 而不是 id
无效的 HTML，无效的脚本……至少 CSS 是有效的？

标签： jquery-animate slideshow

【解决方案1】：

你的脚本有很多错误......试试这个：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="slideshow">
        <div id="slider">
            <div class="image">
                <img src="slide1.jpg" height="360px" width="960px">
            </div>
            <div class="image">
                <img src="slide2.jpg" height="360px" width="960px">
            </div>
            <div class="image">
                <img src="slide3.jpg" height="360px" width="960px"> 
            </div>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var currentImage = $('#slider').find('div').first(),
                nextImage = currentImage.next();

            currentImage.click(function(){
                $(this).animate({marginLeft:"-=900px"});
            });
        });
    </script>
</body>

几个点：

如前所述，如果您想重用名称，请让您的图像使用class 而不是id。具有相同 id 的多个元素是无效的 HTML。
你没有关闭<div id="slideshow"> ...我添加了结束标签。
将脚本移至正文底部...这是提高页面渲染速度的最佳做法（否则页面需要在显示任何内容之前解析整个脚本）。
您对.next() 的使用不正确...它是一个函数，所有函数都至少使用开/关括号调用。
你已经在缓存#slider div，所以我在搜索nextImage 时利用了现有的缓存（我应用了.first() 函数，因为如果你不以某种方式过滤它，它将获取所有divs .
您对动画的存储是……错误的，几乎在所有可能的方面。您可以将动画作为函数存储在变量中，但仅用于重用，显然您还没有准备好。我将动画向下移动到它应该在的位置，它应用于click 事件本身中的元素。
在 .animate() 函数中引用 DOM 名称时，如果使用 CSS 版本（'margin-left' 而不是 marginLeft），则只需应用引号。

不保证这会做你认为它应该做的事情，因为你的 CSS ......现在处理太多了，但至少你的 HTML 和 JS 现在是有效的，你可以专注于手头的问题。

【讨论】：