Question

我正在尝试在页面加载时创建自动fadeIn / fadeOut库。我还想做的是让每张图片都成为一个页面链接，image1将您带到另一页image2，依此类推。我遇到的问题是jQuery没有在子文件夹中找到图像并创建用于使每个图像成为链接的代码。此外，由于页面上会有一些这样的画廊，我可以为每个画廊添加延迟，因此第一个画廊会在下一个画廊前加载几秒钟吗？

HTML：

<body>
    <div id="ad1pic">
        <h3 id="imageCaption"></h3>
        <img src="gallery/slides/Daisy.jpg" alt="" id="picture">
    </div>
</body

JavaScript的：

// JavaScript 
$(document).ready(function() {  
    var imageName=["Daisy.jpg","Diamond.jpg","Heart.jpg","Unique.jpg"];
    var imageTitle=["Daisy","Diamond","Heart","Unique"]
    var counter = 0;

    var clickaway =
        function go(){
            $("#picture").fadeOut(3000, function(){
                $("#picture").attr("src", imageName[counter]);
                $("#imageCaption").text(imageTitle[counter]);
                counter++;
                if (counter > 2) {counter = 0;}
                $("#picture").fadeIn(900).delay(7000);
                go();
            });
        }
    clickaway();
    //$("#picture").click(clickaway);
});//end of document ready

Answer 1

您的数组值没有目录条目，因此子项从错误的目录加载。更改数组条目以包括完整路径，或者包含使用HTML5数据属性读取的图像的基本目录属性。我已经包含了后者的一个工作示例 - 尝试尽可能保持原始脚本的完整性。

不断重新查找选择器是不好的做法，所以我做了一个小优化并将$（＆＃39;＃picture＆＃39;）选择器存储在一个变量中。从技术上讲，你应该尝试将自己限制在方法中的一个var声明中，尽管它会像你一样工作。

＆＃13;

$(document).ready(function() {  
    var imageName=["Daisy.jpg","Diamond.jpg","Heart.jpg","Unique.jpg"];
    var imageTitle=["Daisy","Diamond","Heart","Unique"]
    var counter = 0;
    var $pic = $('#picture');
    function go() {
            $pic.fadeOut(3000, function(){
                $pic.attr("src", $pic.data('basedir') + '/' + imageName[counter]);
                $("#imageCaption").text(imageTitle[counter]);
                counter++;
                if (counter >= imageName.length) {counter = 0;}
                $pic.fadeIn(900).delay(7000);
                go();
            });
        }
    go();
    $pic.click(go);
});//end of document ready

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ad1pic">
   <h3 id="imageCaption"></h3>
   <img src="gallery/slides/Daisy.jpg" data-basedir="gallery/slides" alt="" id="picture">
</div>

＆＃13;

jQuery自动淡入/淡出画廊 - jQuery找不到图像

1 个答案: