Question

我需要帮助来使用jQuery或JavaScript创建简单的文本滑块。

我需要一个带有动画的滑块，以便文本从右向左移动。

在我的代码中，我也有分页，需要突出显示哪个文本处于活动状态。

这就是我所拥有的，我需要非常简单。

互联网上的所有答案都很复杂。

有人可以帮我吗？

.active{
  color:red;
}

<div class="buttons">
  <button name="prev">Prev</button>
  <button name="next">Next</button>
</div>

<div class="content">
  <div class="slide">
    <p>content od slide</p>
  </div>
  <div class="slide">
    <p>content od slide</p>
  </div>
  <div class="slide">
    <p>content od slide</p>
  </div>
</div>

<div class="paginator">
  <div class="pagin-tracker">1</div>
  <div class="pagin-tracker active">1</div>
  <div class="pagin-tracker">1</div>
</div>

Answer 1

您可以尝试这个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .slider {

        }

        .slider__wrap {
            overflow: hidden;
        }

        .slide {
            width: 100%;
            display: inline-block;

            text-align: center;
        }

        .content {
            will-change: transform;
            white-space: nowrap; 
            transition: transform 0.3s;
        }

    </style>
</head>
<body>

    <div id="slider" class="slider">
        <div class="buttons">
          <button name="prev">Prev</button>
          <button name="next">Next</button>
        </div>

        <div class="slider__wrap">
            <div class="content" style="transform: translate(-100%);" data-active="1"> <!-- if you need to set initial position to the second slider, or you can use translate(0) to set it to the first slide  -->
              <div class="slide">
                <p>content od slide 1</p>
              </div>
              <div class="slide">
                <p>content od slide 2</p>
              </div>
              <div class="slide">
                <p>content od slide 3</p>
              </div>
            </div>
        </div>

        <div class="paginator">
          <div class="pagin-tracker">1</div>
          <div class="pagin-tracker active">1</div>
          <div class="pagin-tracker">1</div>
        </div>
    </div>


    <script>
        const slider = document.getElementById('slider');
        const sliderWrap = slider.querySelector('.slider__wrap');
        const sliderContent = sliderWrap.querySelector('.content');
        const sliderButtons = slider.querySelector('.buttons');
        const buttonPrev = sliderButtons.querySelector('button[name="prev"]');
        const buttonNext = sliderButtons.querySelector('button[name="next"]');
        const pages = Array.from(slider.querySelectorAll('.pagin-tracker'));
        const pagesCount = pages.length;
        const slidesCount = sliderContent.querySelectorAll('.slide').length;

        let activeIndex = sliderContent.getAttribute('data-active');

        const updatePaginator = () => {
            for (let i = 0; i < pagesCount; i++) {
                pages[i].classList.remove('active');
            }

            if (pages[activeIndex]) {
                pages[activeIndex].classList.add('active');
            }
        };

        const applyStyle = () => {
            sliderContent.setAttribute('data-active', activeIndex);
            sliderContent.style.cssText = `transform: translate(-${activeIndex * 100}%);`;

            updatePaginator();
        };

        buttonPrev.addEventListener('click', () => {
            if (activeIndex > 0) {
                activeIndex--;

                applyStyle();
            }
        }, false);

        buttonNext.addEventListener('click', () => {
            if (activeIndex < slidesCount - 1) {
                activeIndex++;

                applyStyle();
            }
        }, false);
    </script>
</body>
</html>

Answer 2

您可以使用类似的内容，并根据需要进行扩展。

https://codepen.io/anon/pen/MqRpKg

HTML

<div class="slide-wrap">
      <div class="slide-mask">
        <ul class="slide-group">
          <li class="slide">this</li>
          <li class="slide">is</li>      
          <li class="slide">a</li>
          <li class="slide">simple</li>
          <li class="slide">slider</li>
        </ul>
      </div>

    <div class="slider-nav">
      <ul></ul>
    </div>
    </div>

JQuery：

var $slide = $('.slide'),
    $slideGroup = $('.slide-group'),
    $bullet = $('.bullet')

var slidesTotal = ($slide.length - 1),
    current = 0,
    isAutoSliding = true;

$bullet.first().addClass('current');
var clickSlide = function() {
  //stop auto sliding
  window.clearInterval(autoSlide);
  isAutoSliding = false;

  var slideIndex = $bullet.index($(this));

  updateIndex(slideIndex);
};

var updateIndex = function(currentSlide) {
  if(isAutoSliding) {
    if(current === slidesTotal) {
      current = 0;
    } else {
      current++;
    }
  } else {
      current = currentSlide;
  }

  $bullet.removeClass('current');
  $bullet.eq(current).addClass('current');

  transition(current);
};

var transition = function(slidePosition) {
    var slidePositionNew = (slidePosition ) * 500;
    $slideGroup.animate({
      'left': '-' + slidePositionNew + 'px'
    });
};


var autoSlide = window.setInterval(updateIndex, 2000);

$( "li.slide" ).each(function( index ) {
$('.slider-nav').append('<span class="bullet">'+index+'</span>');
});
var $bullet = $('.bullet');
$bullet.on( 'click', clickSlide);

CSS

body {
    background: rgb(191, 76, 76);
}

/* slider
----------------------*/
.slide-wrap {
  margin: 5% auto 0;
  width: 540px;
}
.slide-mask {
  position: relative;
  overflow: hidden;
  height: 100px;
}
.slide-group {
  position: absolute; 
  top: 0px; 
  left: 0;
}
.slide {
display:inline-block;
  height: 100px;
width:500px;
    font: 100 90px/135px "lato";
    font-size: 2em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;  
}

/* nav
----------------------*/
.slide-nav {
  text-align: center;
border: 1px solid red;
  height: 30px;
  color: red;
}
.slide-nav ul {
    margin: 0;
    padding: 0;
}
.slide-nav li {
  border: 1px solid red;
width: 100px;
  cursor: pointer;
color: red;
}
.slide-nav li.current {
    background: rgb(144, 39, 39);
}
.slider-nav {
width: 300px;
  text-alignt: center;
margin-left:40%;
}
span.bullet {
display:inline-block;
  width: 30px;
cursor: pointer;
}

jQuery中的简单文本滑块

2 个答案: