Question

我正在尝试制作旋转木马，但由于某些原因我的java脚本无法正常工作，我已经查看了firebug并且没有出现任何错误。

我唯一出现的图片是我的加载GIF。

图像位置正确。实例http://codepen.io/riwakawebsitedesigns/pen/CEgdm

代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
   <link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <script type="text/javascript">
        $(document).ready(function Carousel() {
            $(".carousel #1").show("fade", 500);
            $(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);

            var sc = $(".carousel img").size();
            var count = 2;

            setInterval(function () {
                $(".carousel #"+count).show("slide",{direction: 'right', 500});
                $(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);

                if (count == sc) {
                    count = 1;
                } else {
                    count = count + 1
                }
            }, 6500);
        );}
    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="carousel">
                <img id="1" src="images/image1.jpg" border="0" alt="" />
                <img id="2" src="images/image2.jpg" border="0" alt="" />
                <img id="3" src="images/image3.jpg" border="0" alt="" />
            </div>
        </div>
    </div>
</div><!-- . Container -->

</body>
</html>

CSS

.carousel {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.carousel img {
    width: 100%;
    height: 350px;
    display: none;
}

Answer 1

js代码有错误。复制并粘贴以下代码

   $(document).ready(function Carousel() {
            $(".carousel #1").show("fade", 500);
            $(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);

            var sc = $(".carousel img").size();
            var count = 2;

            setInterval(function() {
                $(".carousel #"+count).show("slide",function(){direction: 'right', 500});
                $(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);

                if (count == sc) {
                    count = 1;
                } else {
                    count = count + 1
                }
            }, 6500);
        })

旋转木马图像jquery无法正常工作

1 个答案: