javascript - 将值传递/存储到另一个函数或单击事件

Question

我目前正在为我的项目构建一个 slider 。我已经成功地构建了控件，并希望创建并合并方向箭头。

我当前的问题是方向箭头，如何将 index 值从控件传递到方向控件，以便它知道当前所在的幻灯片。

$(document).ready(function() {


	var programSliderWidth = $('.program-slider').width(),
	    sliderContainer    = $('.program-slider .slides'),
	    slides             = $('.program-slider .slides li'),
	    move               = 0,
	    position           = 0,
	    totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
	slides.width(programSliderWidth);

	//Apply Maximum width based on number of slides
	sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
	$('.navigation .controls li').on('click', function() {
	    var position = $(this).index();
	    var move     = position*programSliderWidth;

	    $('.program-slider .slides').css({'right': move});
	
	});

	//Slider Directional Controls
	$('.buttons .prev').on('click', function() {
	    if( position >= 0 ) {
	        position--;
	        $('.program-slider .slides').css({'right': - (position*programSliderWidth) });
	        
	    }
	});

	$('.buttons .next').on('click', function() {
		if( position <= totalSlides ) {
		     position++;
	        $('.program-slider .slides').css({'right': position * programSliderWidth});		
	    }
	});
})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>
</div>

<div class="navigation">
    <ul class="controls">
        <li>Control slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

<div class="buttons">
    <ul>
        <li class="prev">Prev</li>
        <li class="next">Next</li>
    </ul>
</div>

Answer 1

您有多个错误:

1. 您正在覆盖您的“全局”position与 var position ，在您的 slider 控件中。只需更改var position至position使用公共(public)变量，它应该可以正常工作。

2. 当您检查 position 是否变量超出 position >= 0 范围或position <= totalSlides ，您可以以 -1 等值结尾或totalSlides + 1 ，超出范围。相反，更改那些 >= 0和<= totalSlides与 > 0和< totalSlides - 1 .

3. 在上一个按钮处理程序中，您使用负值设置 slider 位置。由于您要更改其位置，而不是将其移动一段距离，因此需要将其设置为正值。

$(document).ready(function() {

    var programSliderWidth = $('.program-slider').width(),
        sliderContainer    = $('.program-slider .slides'),
        slides             = $('.program-slider .slides li'),
        move               = 0,
        position           = 0,
        totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
    slides.width(programSliderWidth);

    //Apply Maximum width based on number of slides
    sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
    $('.navigation .controls li').on('click', function() {
        position = $(this).index(); // -- CHANGE 1 --
        var move     = position*programSliderWidth;

        $('.program-slider .slides').css({'right': move});
    
    });

    //Slider Directional Controls
    $('.buttons .prev').on('click', function() {
        if( position > 0 ) { // -- CHANGE 2 --
            position--;
            $('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
        }
    });

    $('.buttons .next').on('click', function() {
        if( position < totalSlides - 1 ) { // -- CHANGE 2 --
             position++;
              $('.program-slider .slides').css({'right': position * programSliderWidth});    
          }
    });
})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>
</div>

<div class="navigation">
    <ul class="controls">
        <li>Control slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

<div class="buttons">
    <ul>
        <li class="prev">Prev</li>
        <li class="next">Next</li>
    </ul>
</div>