2

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

我目前拥有的代码循环遍历多个元素。我是这方面的新手，所以我无法弄清楚如何让它一次只运行一个。这必须与 jQuery 1.3.2 一起使用，因为我使用的站点已加载该库，我们无法更新它。

它不一定是 LI，如果出于某种原因更好的话，也可以是 div。任何有关如何实现的建议表示赞赏。

这是我的 fiddle 的链接，但基本的 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');
                    });
                });
            });
4

3 回答 3

4

像这样的东西？

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

小提琴

于 2013-09-16T20:29:02.120 回答
1

问题在于这部分：

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

小提琴

于 2013-09-16T20:28:10.313 回答
0

我将如何做到这一点：

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/

于 2013-09-16T21:36:22.727 回答