个人中心
gpt4 book ai didi

javascript - for/if 循环根据 input::jquery 多次运行一个函数

转载 作者：太空宇宙 更新时间：2023-11-04 14:02:54 24 4
gpt4 key购买 nike

我正在从头开始编写一个 slider ，没有插件。

我有我的 slider 工作，基于将幻灯片加在一起并加上或减去 slider 窗口的长度。当需要添加分页时，它就变得复杂了。我似乎无法理解需要编写的函数的逻辑。

如果单击按钮 1，则运行函数 1 次并转到第一个幻灯片。

如果单击按钮 2，则运行该函数 2 次并转到第二张幻灯片。 ....等等..

我看到的问题是，如果在幻灯片 3 上单击按钮 4，该功能只需要移动一次而不是 4 次!!这是我的头破了，所有的逻辑都从我的耳朵里溢出来的地方。

我该如何写这样的东西？

这是我目前拥有的 jsfiddle。 http://jsfiddle.net/r5DY8/2/

如有任何帮助，我们将不胜感激。

::如果你不想使用 jsfiddle，所有代码都在一个页面上::

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.0.min.js'type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'>
<style type="text/css">

body {
    font-family: 'Marmelad', sans-serif;
   -moz-user-select: none; 
   -webkit-user-select: none; 
   -ms-user-select:none; 
   user-select:none;
 }

#slideContainer {
position: relative;
width: 990px;
height: 275px;
float: left;
overflow: hidden;
margin-top:5%;
margin-left:15%;
  }

 #slideWrap {
width: 3960px;
height: 275px;
position: absolute;
top: 0;
left: 0;
 }

.slide {
width: 990px;
height: 275px;
float: left;
 }

.slide:first-child  { background-color: #009999; } 
.slide:nth-child(2) { background-color: #CC0033; }
.slide:nth-child(3) { background-color: #FFFF66; }
.slide:nth-child(4) { background-color: #006699; }

 #clickLeft{
color: black;
float: left;
margin: 12% 0% 0 15%;
/*background: url("prev.png") no-repeat;*/
width: 60px;
height: 60px;
cursor: pointer;
list-style: none;
position: absolute;
z-index: 9;
border:1px solid black;/**/
 }
#clickRight{
color: black;
float: right;
margin: 12% 0 0 79.5%;
/*background: url("next.png") no-repeat;*/
width: 60px;
height: 60px;
cursor: pointer;
list-style: none;
position: absolute;
border:1px solid black;/**/
 }
 .dots{
width: 9%;
position: absolute;
top: 310px;
text-align: center;
height: 45px;
padding-top: 5px;
background: white;
left: 43.5%;
border-radius: 8px;
list-style:none;
 }
 .dots li {
display: inline-block; 
list-style:none;
 }
.dots li:first-child {
margin-left:-40px;
 }

.dots li a{
width: 16px;
height: 16px;
display: block;
background: #ededed;
cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
border-radius: 20px;
margin: 5px;
 }

 .dots li a:hover { background: rgba(0, 0, 0, 0.7); }
 .styleDots { background: #a4acb2; }
 .active { background: #a4acb2; 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;}
 li.pagerItem{

 }
</style>
 <script type="text/javascript">

$(function(){

var currentSlidePosition = 0;                           
var slideW = 990;                                            
var allSlides = $('.slide');                            
var numberOfSlides = allSlides.length;                  
var marker;                                             

$('.slide').each(function(i) { 
    listNumber=i+1;
    marker = $("<li>");
    marker.addClass('pagerItem '+listNumber);
    $("<a href='#' ></a>").appendTo(marker);
        if (i===0){
        marker.addClass('active'); 
        }
        marker.appendTo($(".dots")); 
});

allSlides.wrapAll('<div id="moveSlide"></div>').css({'float' : 'left','width' : slideW}); 

$('#moveSlide').css('width', slideW * numberOfSlides); 

$('body').prepend('<li class="controls" id="clickLeft"></li>') 
         .append('<li class="controls" id="clickRight"></li>');


$('.controls').click(function(){ 
moveSlide(this);

moveSlide(this); // running twice because the function is being called twice
//create a function that says if button 1 is clicked run the function 1 time if button 3 is clicked run the function 3 times..

  });


var moveSlide = function(thisobject){
console.log('function run');
    if(($(thisobject).attr('id')=='clickRight')) { 
                if(currentSlidePosition == numberOfSlides-1)currentSlidePosition=0; 
                 else currentSlidePosition++;   

                 var active = $(".active").removeClass('active');
                    if(active.next() && active.next().length){
                        active.next().addClass('active');
                    } else {
                        active.siblings(":first").addClass('active');
                    }

                } else if($(thisobject).attr('id')=='clickLeft'){ 
                    if(currentSlidePosition == 0)currentSlidePosition=numberOfSlides-1;                     
                     else currentSlidePosition--;

                    var active = $(".active").removeClass('active');
                    if(active.prev() && active.prev().length){
                        active.prev().addClass('active');
                    } else {
                        active.siblings(":last").addClass('active');
                    }

                }

                $('#moveSlide').animate({'margin-left' : slideW*(-currentSlidePosition)}); 
    }
 });        




</script>
</head>
<body>
<div id="slideContainer">
        <div id="slideWrap">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
    </div>

</div>
    <ul class="dots"></ul>
</body>
</html>

最佳答案

这比仅仅多次调用函数要复杂得多。由于动画是异步的，您需要在动画结束时再次调用该函数，而不是立即调用。

向函数添加一个回调参数，以便它可以在动画结束时使用它做一些事情:

var moveSlide = function (thisobject, callback) {

给动画添加回调:

  $('#moveSlide').animate({
    'margin-left': slideW * (-currentSlidePosition)
  }, callback);

制作一个函数moveTo，它将在正确的方向调用moveSlide，并将其自身用作回调:

function moveTo(target){
    if (target < currentSlidePosition) {
        moveSlide($('#clickLeft'), function(){ moveTo(target); });
    } else if (target > currentSlidePosition) {
        moveSlide($('#clickRight'), function(){ moveTo(target); });
    }
}

将点击事件绑定(bind)到点中的链接。使用 index 方法找出您要转到的幻灯片，并调用 moveTo 来执行此操作:

$('.dots a').click(function(e){
    e.preventDefault();
    var target = $(this).parent().index();
    moveTo(target);
});

fiddle :http://jsfiddle.net/Guffa/r5DY8/3/

关于javascript - for/if 循环根据 input::jquery 多次运行一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21362848/

24 4 0
文章推荐： java - Arquillian - 模块中已定义组件
文章推荐： HTML 条件语句 if IE
文章推荐： c++ - 为什么在存在 decltype 的情况下范围解析失败？
文章推荐： css - 如何使用目标设置默认选项卡？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com