个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 11:23:42 24 4
gpt4 key购买 nike

我正在尝试使用一些 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);
}

最佳答案

因此，您的 JS 发生了几件事，这可能是这里的问题。首先快速 JShint 告诉我有一些语法错误(缺少分号等)。但我认为真正的问题是您正在使用其中一些方法和非默认缓动，但没有定义新的缓动。

例如 .hide() 没有“滑动”缓动。 http://api.jquery.com/hide/ .我会通读 .show() 和 .hide() 的 api，您可能需要将它们替换为 .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() 以获得您想要的水平滑动效果。

关于javascript - 第一张图片不显示在 JS/JQUERY 幻灯片中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21441392/

24 4 0
文章推荐： html - 在无表格网页设计中对齐 div 时出现问题
文章推荐： javascript - 自定义 jQuery slider 在 iOS 7 Safari 上不起作用
文章推荐： JavaScript - 警报 ("zoo">"house") 返回 true
文章推荐： javascript - 如何使用 jquery Submit() 表单处理程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com