自定义jQuery图像滑块不工作

无法显示我的任何图像

JQUERY

没有一张图片显示出来，或者正在转换。所以，我花了几个小时试图弄清楚这一点。我相信这与它第一次自动转换有关，之后就无法切换

更新1

---

在第一次响应后，我查看了我的代码，并将.animate更改为.css，意识到我正在以相反的顺序更改图片的不透明度。仍然不起作用

您可以将包含它们的每个图像或元素指定为同一类。然后你就可以知道这个系列的长度了。此外，默认情况下，您应该显示系列中的第一个。昨天我在玩弄一种方法来做类似的事情，下面是我所拥有的，让你知道它是如何工作的：

<button id="right">next</button>
<hr>

<div class="hidey" id="pic1">1</div>
<div class="hidey" id="pic2">2</div>
<div class="hidey" id="pic3">3</div>
<div class="hidey" id="pic4">4</div>

请尝试以下我的代码：

$document.readyfunction{ var slideIndex=1； var slideLength=$“slider>img.”大小； 无功定时器； 功能幻灯片{ 如果slideIndex<0{ slideIndex=slideLength-1； } 如果slideIndex>=slideLength{ slideIndex=0； } $滑块>img'.hide.animate{ 不透明度：0 }, 200; $滑块>img'.eqslideIndex.show.animate{ 不透明度：1 }, 200; } 功能改变{ 定时器=设置间隔功能{ slideIndex++； 滑动 },1000; } 如果！$”.home\u img\u slider\u container'.is'：悬停{ 改变 } $'.home\u img\u slider\u container'.mouseoverfunction{ 间隔定时器； }.mouseout函数{ 改变 }; $'.home\u img\u滑块\u btn\u left'。单击，函数{ slideIndex-； 滑动 }; $'.home\u img\u slider\u btn\u right'。单击，函数{ slideIndex++； 滑动 }; }; .home\u img\u滑块\u容器{ 宽度：200px； 利润率：05%05%； } .home\u img\u滑块\u btn\u左、.home\u img\u滑块\u btn\u右{ 光标：指针； 不透明度：0； 位置：绝对位置； 宽度：50px； 高度：50px； 顶部：calc50%-50px； 背景色：c2f8ff； 边界半径：50%； -moz过渡：不透明度。5s缓和，顶部。5s缓和，背景色。5s缓和； -o型过渡：不透明度。5s缓和，顶部。5s缓和，背景色。5s缓和； -webkit过渡：不透明度。5s缓和，顶部。5s缓和，背景色。5s缓和； 过渡：不透明度。5s缓和，顶部。5s缓和，背景色。5s缓和； z指数：3； } .home\u img\u滑块\u btn\u左{ 左：10px； } .home\u img\u滑块\u btn\u左：悬停{ 背景色：RGBA194248255 0.50； } .home\u img\u滑块\u btn\u左img{ 高度：50px； } .home\u img\u滑块{ 左边距：自动； 右边距：自动； 宽度：400px； 高度：400px； 溢出：隐藏； 位置：相对位置； 边框：1px实心1F242A； } 滑块式img{ 不透明度：0； -moz过渡：不透明度。5s缓解； -o-转变：不透明度。5s缓解； -webkit过渡：不透明度。5s轻松； 过渡：不透明度。5s缓解； 宽度：400px； 高度：400px； 显示：无； } .home\u img\u滑块：悬停。home\u img\u滑块\u btn\u左侧。home\u img\u滑块：悬停。home\u img\u滑块\u btn\u右侧{ 不透明度：1； 顶部：calc50%-25px； } .home\u img\u滑块\u btn\u右侧{ 右：10px； } .home\u img\u滑块\u btn\u右侧：悬停{ 背景色：RGBA194248255 0.50； } .home\u img\u滑块\u btn\u右img{ 高度：50px； } 家

---

尝试过在你的方法上乱搞，特别是你显示第一个图像而隐藏其余的。所有的图像都被隐藏了，我无法循环浏览它们。此外，您的方法是手动的。我在找带手动超控的半自动的。是的。我会再试试你的代码，然后玩弄它。再试试。图像仍然没有显示。我肯定你知道小提琴中没有实际图像的参考，只有表示图像的数字，但这里用小猫图片更新：是的，我使用了你的代码作为参考，而不是直接复制和粘贴。现在滑块几乎100%工作。唯一的问题是，每次我正确使用按钮，或者让滑块自动运行时，都会有一个空格，让我觉得当slideIndex超过长度时，它不会按应该的方式重置。我的示例代码高于100%，对吗？如果您在正确使用按钮时遇到问题，可能只是增量sliderIndex有点错误，请再次检查增量的逻辑。我仅在css中使用它，我忘记返回并回答，对不起。我在一个单独的页面上测试了您的代码，它可以正常工作。

    <div style="" id="home_container">
    <div class="page_title">
        <i></i>Home
    </div>
    <div class="home_img_slider_container">
        <div class="home_img_slider">
            <div class="home_img_slider_btn_left">
                <img src="files/img/icon-arrow-left.png" />
            </div>
            <div id="slider">
                <img title="Eaglespeed" class="home_img_slider_img one" src="files/img/eaglespeed-corner.jpg" />
                <img title="Eaglespeed" class="home_img_slider_img two" src="files/img/eaglespeed.jpg" />
                <img title="Eaglespeed" class="home_img_slider_img three" src="files/img/eaglespeed-front.jpg" />
                <img title="Eaglespeed" class="home_img_slider_img four" src="files/img/eaglespeed-giants.jpg" />
                <img title="Eaglespeed" class="home_img_slider_img five" src="files/img/eaglespeed-sign.jpg" />
            </div>
            <div class="home_img_slider_btn_right">
                <img src="files/img/icon-arrow-right.png" />
            </div>
        </div>
    </div>
</div>

.home_img_slider_container {
width: 90%;
margin: 0 5% 0 5%;
}

.home_img_slider_btn_left, .home_img_slider_btn_right {
cursor: pointer;
opacity: 0;
position: absolute;
width: 50px;
height: 50px;
top: calc(50% - 50px);
background-color: #c2f8ff;
border-radius: 50%;
-moz-transition: opacity .5s ease, top .5s ease, background-color .5s ease;
-o-transition: opacity .5s ease, top .5s ease, background-color .5s ease;
-webkit-transition: opacity .5s ease, top .5s ease, background-color .5s ease;
transition: opacity .5s ease, top .5s ease, background-color .5s ease;
z-index: 3;
}

.home_img_slider_btn_left {
left: 10px;
}

.home_img_slider_btn_left:hover {
    background-color: rgba(194, 248, 255, 0.50);
}

.home_img_slider_btn_left img {
    height: 50px;
}

.home_img_slider {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
border: 1px solid #1F242A;
}

#slider img {
    height: 100%;
    width: 100%;
    opacity: 0;
    -moz-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
}

.home_img_slider:hover .home_img_slider_btn_left, .home_img_slider:hover .home_img_slider_btn_right {
    opacity: 1;
    top: calc(50% - 25px);
}

.home_img_slider_btn_right {
right: 10px;
}

.home_img_slider_btn_right:hover {
    background-color: rgba(194, 248, 255, 0.50);
}

.home_img_slider_btn_right img {
    height: 50px;
}

<button id="right">next</button>
<hr>

<div class="hidey" id="pic1">1</div>
<div class="hidey" id="pic2">2</div>
<div class="hidey" id="pic3">3</div>
<div class="hidey" id="pic4">4</div>

$(function(){
     var i = 1;
     var x = $(".hidey");
     var y = x.length;

    //shows the first image before any clicking:
     $(x[0]).show();

     $("#right").click(function() {

         if(i >= y) {
          i = 0;
         } 

     //HIDES the first pic, and all others except current index:

     $(".hidey").not( $(x)[ i ] ).hide();

    //Shows the index assigned in the first line, which is 1, which is actually the SECOND pic in the series.     

     $(x[i]).show();

    //...and the next and on.    
     i++; 
     })

});