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

Question

我目前正在为我的项目构建一个滑块。我已设法构建控件并寻求创建并寻找合并方向箭头。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有多个错误：

1. 您覆盖您的＆＃34;全球＆＃34;滑块控件中position var position var position。只需将position更改为position即可使用公共变量，它应该可以正常运行。

2. 当您检查position >= 0变量是否超出position <= totalSlides或-1时，您可能会以totalSlides + 1或>= 0之类的值结束<= totalSlides，超出界限。相反，请使用> 0和< totalSlides - 1更改$(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 */。

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

＆＃13;
＆＃13;
<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>
＆＃13;
{{1}}
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;