自定义 jQuery 图片滑块不工作

Question

无法显示我的任何图像。

JQUERY

function slider() {
var slideIndex = 1;
var slideLength = $('#slider').length();
function slide() {
    if (slideIndex < 1) {
        slideIndex = (slideLength - 1);
    }

    if (slideIndex > slideLength) {
        slideIndex = 1;
    }

    $('#slider:nth-child(' + slideIndex + ')').css({
        opacity: 0
    });
    $('#slider:nth-child(' + (slideLength + 1) + ')').css({
        opacity: 1
    })
}
if (!$('#slider').is(':hover')) {
    timer = setInterval(function () {
        slideIndex++;
        slide();
    });
}

$('.home_img_slider_btn_left').on('click', function () {
    slideIndex--;
    slide();
});
$('.home_img_slider_btn_right').on('click', function () {
    slideIndex++;
    slide();
});
}

HTML

    <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>

CSS

.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;
}

None 的图像正在显示或转换，所以我花了几个小时试图弄清楚这一点。估计跟第一次自动过渡有关系，之后就不能切换了。

更新 1 我在第一个响应后检查了我的代码，并将 .animate 更改为 .css，意识到我正在以相反的顺序更改图片的不透明度。还是行不通。

Answer 1

您可以为每个图像或包含它们的元素指定相同的 class。然后你可以抓住那个系列的长度。此外，您应该默认显示系列中的第一个。昨天我一直在胡思乱想用一种方法来做这样的事情，这就是我所拥有的，让你了解它是如何工作的：

<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>

js:

$(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++; 
     })

});

http://jsfiddle.net/toL33fzy/5/

Answer 2

试试这个我的代码：

$(document).ready(function(){
    var slideIndex = 1;
    var slideLength = $('#slider > img').size();
    var timer;
    
    function slide() {
        if (slideIndex < 0) {
            slideIndex = (slideLength - 1);
        }
    
        if (slideIndex >= slideLength) {
            slideIndex = 0;
        }
        
        $('#slider > img').hide().animate({
        opacity: 0
    }, 200);
        $('#slider > img').eq(slideIndex).show().animate({
        opacity: 1
    }, 200);
    }
    
    function change(){
        timer = setInterval(function () {
        slideIndex++;
        slide();
    },1000);
    }
    
    if (!$('.home_img_slider_container').is(':hover')) {
        change();
    }
    
    $('.home_img_slider_container').mouseover(function(){
     clearInterval(timer);
    }).mouseout (function(){
         change();
    });
    
    $('.home_img_slider_btn_left').on('click', function () {
        slideIndex--;
        slide();
    });
    $('.home_img_slider_btn_right').on('click', function () {
        slideIndex++;
        slide();
    });
    
});

.home_img_slider_container {
width: 200px;
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: 400px;
height: 400px;
overflow: hidden;
position: relative;
border: 1px solid #1F242A;
}

#slider img {
    opacity: 0;
    -moz-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    width:400px;
    height:400px;
    display:none;
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="http://www.mricons.com/store/png/121768_40595_32_arrow_left_icon.png" />
            </div>
            <div id="slider">
                                
                <img title="Eaglespeed" src="http://glamorouslymommy.com/wp-content/uploads/2013/05/small-background1.jpg" />
                
                 <img title="Eaglespeed"  src="http://images.neopets.com/ncmall/claw/popups/bg.png" />
                
                <img title="Eaglespeed"  src="http://botanical.bg/en/wp-content/uploads/2014/05/400px-Organic-Logo.svg_.png" />
                
            </div>
            <div class="home_img_slider_btn_right">
                <img src="http://cdn-img.easyicon.net/png/10967/1096749.gif" />
            </div>
        </div>
    </div>
</div>

自定义 jQuery 图片滑块不工作

Custom jQuery Image Slider Not Working

jquery

loops

slider