Question

<!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将向左边动画900px。但我有一个问题，因为如果我点击#image就没有任何事情发生。

有人可以帮助我吗？

P.S。我来自荷兰，所以如果我的英语不好，我会道歉。

Answer 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()的使用不正确......它是一个函数，所有函数都是使用open / close parenths来调用的。
您已经在缓存#slider div，因此我在搜索nextImage时利用了现有的cachine（我应用了.first()函数，因为它将获得所有div个如果你不以某种方式过滤它。
你的动画存储是......错误的，尽可能的。您可以将动画存储在变量中作为函数，但仅用于重用，显然您还没有准备好。我将动画向下移动到应该的位置，这将应用于click事件本身的元素。
在.animate()函数中引用DOM名称时，如果使用CSS版本（＆＃39; margin-left＆＃39;而不是marginLeft），则只需要应用引号。

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

Jquery幻灯片不起作用

1 个答案: