Javascript 如何构建具有滑动或不透明效果的简单 jQuery 图像滑块？

How to build simple jQuery image slider with sliding or opacity effect?

提问by Barlas Apaydin

Some of us might not want to use ready plugins because of their high sizes and possibilty of creating conflicts with current javascript.

我们中的一些人可能不想使用现成的插件，因为它们的尺寸很大并且可能与当前的 javascript 产生冲突。

I was using light slider plugins before but when customer gives modular revise, it became really hard to manipulate. Then I aim to build mine for customising it easily. I believe sliders shouldn't be that complex to build from beginning.

我之前使用的是轻量滑块插件，但是当客户进行模块化修改时，它变得非常难以操作。然后我的目标是构建我的以便轻松定制它。我相信滑块不应该从一开始就构建那么复杂。

What is a simple and clean way to build jQuery image slider?

什么是构建 jQuery 图像滑块的简单而干净的方法？

回答by Barlas Apaydin

Before inspecting examples, you should know two jQuery functions which i used most.

在查看示例之前，您应该了解我最常用的两个 jQuery 函数。

index()returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

index()返回值是一个整数，表示 jQuery 对象中第一个元素相对于其兄弟元素的位置。

eq()selects of an element based on its position (index value).

eq()根据元素的位置（索引值）选择元素。

Basicly i take selected trigger element's index valueand match this value on images with eqmethod.

基本上，我采用选定的触发元素index value并使用eq方法在图像上匹配此值。

- FadeIn / FadeOuteffect.

-淡入/淡出效果。

- Slidingeffect.

-滑动效果。

- alternate Mousewheelresponse.

- 备用鼠标滚轮响应。

---

---

?html sample:

? html示例：

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

---

---

OPACITY EFFECT: jsFiddle.

不透明度效果： jsFiddle。

css trick:overlapping images with position:absolute

css技巧：用位置重叠图像：绝对

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

jQuery：

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

---

---

SLIDING EFFECT: jsFiddle.

滑动效果：jsFiddle。

css trick:with double wrapper and use child as mask

css 技巧：使用双包装器并使用 child 作为掩码

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

jQuery：

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

---

---

Common jQuery response for both slider:

两个滑块的常见 jQuery 响应：

( triggers + next/prev click and timing)

（触发 + 下一个/上一个点击和计时）

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

---

---

回答by shuseel

Here is a simple and easy to understand code for Creating image slideshow using JavaScript without using Jquery.

这是一个简单易懂的代码，用于在不使用 Jquery 的情况下使用 JavaScript 创建图像幻灯片。

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />

回答by quAnton

I have recently created a solution with a gallery of images and a slider that apears when an image is clicked.

我最近创建了一个解决方案，其中包含一个图像库和一个在单击图像时出现的滑块。

Take a look at the code here: GitHub Code

看看这里的代码：GitHub Code

And a live example here: Code Example

这里有一个活生生的例子：代码示例

var CreateGallery = function(parameters) {
 var self = this;
 this.galleryImages = [];
 this.galleryImagesSrcs = [];
 this.galleryImagesNum = 0;
 this.counter;
 this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image';
 this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768;
 this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2;
 this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024;
 this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3;
 this.addModalGallery = function(gallerySelf = self){
  var $div = $(document.createElement('div')).attr({
   'id': 'modal-gallery'
  }).append($(document.createElement('div')).attr({
    'class': 'header'
   }).append($(document.createElement('button')).attr({
     'class': 'close-button',
     'type': 'button'
    }).html('×')
   ).append($(document.createElement('h2')).text(gallerySelf.galleryTitle))
  ).append($(document.createElement('div')).attr({
    'class': 'text-center'
   }).append($(document.createElement('img')).attr({
     'id': 'gallery-img'
    })
   ).append($(document.createElement('button')).attr({
     'class': 'prev-button',
     'type': 'button'
    }).html('◄')
   ).append($(document.createElement('button')).attr({
     'class': 'next-button',
     'type': 'button'
    }).html('►')
   )
  );
  parameters.element.after($div);
 };
 $(document).on('click', 'button.prev-button', {self: self}, function() {
  var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter];
  var $currHash = self.galleryImagesSrcs[self.counter];
  var $src = $currImg.src;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 $(document).on('click', 'button.next-button', {self: self}, function() {
  var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter];
  var $currHash = self.galleryImagesSrcs[self.counter];
  var $src = $currImg.src;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 $(document).on('click', 'div#modal-gallery button.close-button', function() {
  $('#modal-gallery').css('position', 'relative');
  $('#modal-gallery').hide();
  $('body').css('overflow', 'visible');
 });
 parameters.element.find('a').on('click', {self: self}, function(event) {
  event.preventDefault();
  $('#modal-gallery').css('position', 'fixed');
  $('#modal-gallery').show();
  $('body').css('overflow', 'hidden');
  var $currHash = this.hash.substr(1);
  self.counter = self.galleryImagesSrcs.indexOf($currHash); 
  var $src = $currHash;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 this.sizeGallery = function(gallerySelf = self) {
  var $modalGallery = $(document).find("div#modal-gallery");
  if($modalGallery.length <= 0) {
   this.addModalGallery();
  }
  var $windowWidth = $(window).width();
  var $parentWidth = parameters.element.width();
  var $thumbnailHref = parameters.element.find('img:first').attr('src');
  if($windowWidth < gallerySelf.maxMobileWidth) {
   var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); 
   var emMobile = 0;
   var pxMobile = 2;
//                        var emMobile = gallerySelf.numMobileImg * 0.4;
//                        var pxMobile = gallerySelf.numMobileImg * 2;
   parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)');
  } else if($windowWidth < gallerySelf.maxTabletWidth) {
   var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); 
   var emTablet = 0;
   var pxTablet = 2;
//                        var emTablet = gallerySelf.numMobileImg * 0.4;
//                        var pxTablet = gallerySelf.numMobileImg * 2;
   parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)');
  } else {
   var $thumbImg = new Image();
   $thumbImg.src = $thumbnailHref;
   $thumbImg.onload = function() {
    var $thumbnailWidth = this.width;
    if($parentWidth > 0 && $thumbnailWidth > 0) {
     parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%');
    }
   };
  }
 };
 this.startGallery = function(gallerySelf = self) {
  parameters.element.find('a').each(function(index, el) {
   var $currHash = el.hash.substr(1);
   var $img = new Image();
   $img.src = $currHash;
   gallerySelf.galleryImages.push($img);
   gallerySelf.galleryImagesSrcs.push($currHash);
  });
  this.galleryImagesNum = this.galleryImages.length;
 };
 this.sizeGallery();
 this.startGallery();
};
var myGallery;
$(window).on('load', function() {
 myGallery = new CreateGallery({
  element: $('#div-gallery'),
  maxMobileWidth: 768,
  numMobileImg: 2,
  maxTabletWidth: 1024,
  numTabletImg: 3
 });
});
$(window).on('resize', function() {
 myGallery.sizeGallery();
});

#div-gallery {
 text-align: center;
}
#div-gallery img {
 margin-right: auto;
 margin-left: auto;
}
div#modal-gallery {
 top: 0;
 left: 0;
 width: 100%;
 max-width: none;
 height: 100vh;
 min-height: 100vh;
 margin-left: 0;
 border: 0;
 border-radius: 0;
 z-index: 1006;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 display: none;
 background-color: #fefefe;
 position: relative;
 margin-right: auto;
 overflow-y: auto;
 padding: 0;
}
div#modal-gallery div.header {
 position: relative; 
}
div#modal-gallery div.header h2 {
 margin-left: 1rem; 
}
div#modal-gallery div.header button.close-button {
 position: absolute;
 top: calc(50% - 1em);
 right: 1rem;
}
div#modal-gallery img {
 display: block;
 max-width: 98%;
 max-height: calc(100vh - 5em);
 margin-right: auto;
 margin-left: auto;
}
div#modal-gallery div.text-center {
 position: relative;
}
button.close-button {
 display: inline-block;
 padding: 6px 12px;
 margin-bottom: 0;
 font-size: 20px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
 color: #333;
 background-color: #fff;
 border-color: #ccc;
}
button.close-button:hover, button.close-button:focus {
 background-color: #ddd;
}
button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus {
 color: #fff;
 text-decoration: none;
 filter: alpha(opacity=90);
 outline: 0;
 opacity: .9;
}
button.next-button, button.prev-button {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 width: 15%;
 font-size: 20px;
 color: #fff;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0,0,0,.6);
 background-color: rgba(0,0,0,0);
 filter: alpha(opacity=50);
 opacity: .5;
 border: none;
}
button.next-button {
 right: 0;
 left: auto;
 background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
 background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 background-repeat: repeat-x;
}
button.prev-button {
 background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
 background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 background-repeat: repeat-x;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div-gallery">
 <a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a>
 <a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a>
 <a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a>
 <a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a>
 <a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a>
 <a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a>
</div>

回答by V K Singh

Checkout this whole bunch of code to build simple jquery image slider. Copy and save this file to local machine and test it. You can modify it according to your requirement.

查看这整堆代码来构建简单的 jquery 图像滑块。将此文件复制并保存到本地机器并进行测试。您可以根据您的要求对其进行修改。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  var current_img = 1;
  var i;

  $(document).ready(function(){
    var imgs = $("#image").find("img");

    function show_img(){
      for (i = 1; i < imgs.length+1; i++) {
        if(i == current_img){
          $(imgs[i-1]).show();
        }else{
          $(imgs[i-1]).hide()
        }
      }
    }

    $("#prev").click(function(){
      if(current_img == 1){
        current_img = imgs.length;
      }else{
        current_img = current_img - 1
      }
      show_img();
    });

    $("#next").click(function(){
      if(current_img == imgs.length){
        current_img = 1;
      }else{
        current_img = current_img + 1
      }
      show_img();
    });

  });

</script>
</head>
<body>

<div style="margin-top: 100px;"></div>
<div class="container">
  <div class="col-sm-3">
    <button type="button" id="prev" class="btn">Previous</button>
  </div>

  <div class="col-sm-6">
    <div id="image">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
      <img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
    </div>
  </div>

  <div class="col-sm-3">
    <button type="button" id="next" class="btn">Next</button>
  </div>
</div>

</body>
</html>

回答by M_Griffiths

I have written a tutorial on creating a slideshow, The tutorial pageIn case the link becomes invalid I have included the code in my answer below.

我写了一个关于创建幻灯片的教程，教程页面如果链接无效，我已经在下面的答案中包含了代码。

the html:

html：

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

css:

css：

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

jQuery:

jQuery：

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});