Question

我正在尝试使用一些javaquery制作一个javascript幻灯片，第一张图片不应该像它应该淡入淡出，所以很明显其他图像都没有滑出或滑出。这是我第一次尝试制作其中一个所以我不太确定为什么它不起作用我已经仔细查看代码以确保我拼写正确的所有内容和所有正确的标点符号，但我我猜我还是会遗漏一些东西。无论如何我的代码。

HTML5

<head>
    <title>Home Styles</title>

    <link rel="stylesheet" href="CSS/index.css" type="text/css"/>
    <link rel="stylesheet" href="CSS/style.css" type="text/css"/>
    <link rel="shortcut icon" href="Images/favicon-logo-HS.ico"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="JS/slider.js"></script>
</head>

<body onload="Slider();" class="body">

            <div class="slider">
                <img id="1" src="Images/slide_image1.jpg" alt="TV Deals"/>
                <img id="2" src="Images/slide_image2.jpg" alt="Furniture Deals"/>
                <img id="3" src="Images/slide_image3.jpg" alt="Electronic Deals"/>
            </div>

CSS3

.slider {
    width: 990px;
    height: 270px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url('../Images/ajax-loader.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.slider img{
    width: 990px;
    height: 270px;
    border: 0;
    display: none;
}

的javascript

function Slider(){
    $(".slider #1").show("fade",500);
    $(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);

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

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

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

Answer 1

因此，您的JS可能会出现一些问题。首先快速JShint告诉我有一些语法错误（缺少分号等）。但我认为真正的问题是你在非默认缓动中使用其中一些方法，而不是定义新方法。

例如.hide()没有“幻灯片”缓动。 http://api.jquery.com/hide/。我会通过api阅读.show()和.hide()你可能需要用.animate()替换它们

以下是可能适合您的解决方案： EXAMPLE FIDDLE

HTML：

  <div class="slider">
     <img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
     <img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
     <img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
  </div>

JS：

$(document).ready(function () {
    slider();
});

function slider(){
    var count = 1;

    $('#1').show();

    (function slide(){
        $('.slider img').hide();

        if (count > 3) {count = 1;} // makes this a loop

        $('#'+count).fadeIn('slow');
        count += 1;

        setTimeout(function () {
            slide();
        }, 5000);
    })();
}

我使用setTimeout()代替setInterval()，因为个人偏好（间隔可以重叠函数调用）。您也可以删除我示例中的.fadeIn()并将其替换为.animate()，以获得您想要的水平幻灯片效果。

Answer 2

在jsfiddle中查看此内容并删除jsfiddle不想要的所有额外内容后，我发现你错过了一个结束括号。我不明白你怎么不能得到控制台错误，因为这是一个语法错误：

function Slider() {
    $("#a1").show("fade",500);
    $("#a1").delay(5500).hide("slide", {direction: 'left'}, 500); 
}

http://jsfiddle.net/mF7wv/

第一张图片不会显示在JS / JQUERY幻灯片中

2 个答案: