jQuery fadeIn 元素一次一个 onClick

jQuery fadeIn elements one at a time with onClick

本文关键字：onClick 一个 一次 fadeIn 元素 jQuery      更新时间：2023-09-26

我正在尝试创建一个非常基本的幻灯片，用户可以在其中单击后退或下一个箭头以查看上一个或下一个元素。 我发现了与此类似的各种问题，但它们是自动转换;我正在寻找一次切换一个的元素。如果单击"下一步"，则应向前移动，如果单击"后退"，则应返回。 如果有人从第一次点击回来，它应该显示最后一次;如果他们在最后一个时单击"下一步"，它将返回到第一个。

我目前在多个元素中循环的代码。 我是新手，所以我很难弄清楚如何让它一次只去一个。这必须与jQuery 1.3.2一起使用，因为我使用的网站已经加载了该库，我们无法更新它。

它不一定是 LI，如果出于某种原因更好，也可以是div。任何关于如何实现的建议，不胜感激。

这是我的小提琴的链接，但基本的HTML将是：

        <div id="arrow-next"></div>
        <div id="arrow-back"></div>
        <ul class="services">
            <li style="display: block;">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
            <li>slide 4</li>
            <li>slide 5</li>
            <li>slide 6</li>
        </ul>

.css：

        ul.services li{
        height: 500px;
        width: 980px;
        border: 1px solid #ccc;
        text-align: center;
        list-style-type: none;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: #fff;
        }
        ul.services {
        display: inline-block;
        position: relative;
        }

jquery：

        $(document).ready(function() {
            $("#arrow-next").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).next().fadeIn('slow');
                });
            });
            $("#arrow-back").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).prev().fadeIn('slow');
                });
            });
        });

提前感谢您提供的任何帮助。 我找到了这篇文章并尝试像这样更新，但它并没有改变我已经拥有的代码会发生什么。

            $(document).ready(function() {
                $("#arrow-next").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).next().fadeIn('slow', function(){
                        $(this).prev().fadeOut('slow');
                    });
                    });
                });
                $("#arrow-back").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).prev().fadeIn('slow');
                    });
                });
            });

这样的东西？

$(document).ready(function () {
    $("#arrow-next").click(function () {
        $('ul.services li:visible').fadeOut(function () { //select only the visible element
            var $next = $(this).next(); //get the next element
            var $target = $next.length ? $next : $('ul.services li:first'); //if there is no next then switch the pointer to point to the first one.
            $target.stop(true,true).fadeIn('slow'); //now fadeIn the target element.
        });
    });
    $("#arrow-back").click(function () {
        $('ul.services li:visible').fadeOut(function () {
            var $prev = $(this).prev(); //get the prev element
            var $target = $prev.length ? $prev : $('ul.services li:last');//if there is no next then switch the pointer to point to the last one.
            $target.stop(true,true).fadeIn('slow');//now fadeIn the target element.
        });
    });
});

小提琴

问题是这部分：

$('ul.services li')

匹配所有<li>元素，以便它们全部淡出，然后下一个元素（针对每个元素）淡入。

如果这样做：

$("#arrow-next").click(function() {
    $('ul.services li:visible').fadeOut(function(){
        $(this).next().fadeIn('slow');
    });
});
$("#arrow-back").click(function() {
    $('ul.services li:visible').fadeOut(function(){
        $(this).prev().fadeIn('slow');
    });
});

您将能够上下移动，但最后一个的"向上"不会在第一个中消失。（主要区别在于添加到选择器:visible。

最后，

再添加一个位，通过检查是否通过执行正常操作淡入，然后，如果没有，则淡入第一个（或最后一个）来使其在最后滚动。

$("#arrow-next").click(function () {
    $('ul.services li:visible').fadeOut(function () {
        $(this).next().fadeIn('slow');
        if ($('ul.services li:visible').length == 0) {
            $('ul.services li:first').fadeIn('slow');
        }
    });
});
$("#arrow-back").click(function () {
    $('ul.services li:visible').fadeOut(function () {
        $(this).prev().fadeIn('slow');
        if ($('ul.services li:visible').length == 0) {
            $('ul.services li:last').fadeIn('slow');
        }
    });
});

小提琴

以下是我将如何做到的：

.HTML：

<div><span class="leftArrow">< </span><span class="rightArrow"> ></span></div>
  <div class="slideContainer">
  <div class="slide1 slide">slide 1</div>
  <div class="slide2 slide">slide 2</div>
  <div class="slide3 slide">slide 3</div>
  <div class="slide4 slide">slide 4</div>
</div>

JavaScript：

$('.slide').hide();
$('.slide1').show().addClass('active');
var eq=0;
$('.leftArrow').on('click',function(){
  $('.active').hide("slide", { direction: "right" }, 500);
  if(eq==0){
      $('.slide').removeClass('active');
      eq=3;
      $('.slide:eq('+eq+')').addClass('active');         
  }
  else{
      eq=eq-1;       
      $('.slide').removeClass('active');
      $('.slide:eq('+eq+')').addClass('active');      
  }    
  $('.active').show('slide',{direction:"left"},500);
});

$('.rightArrow').on('click',function(){
$('.active').hide("slide", { direction: "left" }, 500);
  if(eq==3){
      $('.slide').removeClass('active');
      eq=0;
      $('.slide:eq('+eq+')').addClass('active');         
  }
  else{
      eq=eq+1;        
      $('.slide').removeClass('active');
      $('.slide:eq('+eq+')').addClass('active');      
  }    
  $('.active').show('slide',{direction:"right"},500);
});

您可以在此处查看工作示例：http://jsfiddle.net/PHrct/

相关文章：