Question

我在youtube上观看了如何使用jquery创建滑块的教程jquery tutorial slider

但没有上一个和下一个按钮

如何将上一个和下一个按钮添加到Jquery Slider

以下是代码：

＆＃13;

'use strict';

$(function() {

    //settings for slider
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                if (++currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();


});

＆＃13;

#slider {
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}

/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}

＆＃13;

<div class="container">
            <div class="header">
                <h1 class="text-muted">jQuery Basic Slider</h1>
            </div>

            <div id="slider">
                <ul class="slides">
                    <li class="slide slide1">slide1</li>
                    <li class="slide slide2">slide2</li>
                    <li class="slide slide3">slide3</li>
                    <li class="slide slide4">slide4</li>
                    <li class="slide slide5">slide5</li>
                    <li class="slide slide1">slide1</li>
                </ul>
            </div>

        </div>

＆＃13;

谢谢

Answer 1

你可以添加一个click功能到next和prev并添加（next）或扣除（prev）margin-left如下：

Roleplay::find(Auth::user()->id)

检查我为测试而创建的codepen：http://codepen.io/adrianrios/pen/evLOyQ

我希望这会有所帮助。

Answer 2

试试这个！我在代码中添加了关于我为什么做我所做的事情的评论。

＆＃13;

public List<Product> GetTopRelatedProducts(int N)
{
    var relatedSet = new HashSet<Product>();
    GetRelatedProducts(this);
    return relatedSet.OrderByDescending(x => x.Rating).Take(N).ToList();

    void GetRelatedProducts(Product product)
    {
        if (product.RelatedProducts == null) return;
        foreach (var item in product.RelatedProducts)
            if (item != this && relatedSet.Add(item))
                GetRelatedProducts(item);
    }
}

＆＃13;

$(function() {

  //settings for slider
  var width = 720;
  var animationSpeed = 1000;
  var pause = 3000;
  var currentSlide = 1;
  var margin = 0; //Create variable for margin

  //cache DOM elements
  var $slider = $('#slider');
  var $slideContainer = $('.slides', $slider);
  var $slides = $('.slide', $slider);
  var length = $slides.length;

  var interval;

  //Make this a function do that you don't need to keep repeating it
  function Slider() {
    $slideContainer.animate({
      'margin-left': margin //make the margin a variable, so that you can access it in multiple functions
    }, animationSpeed, function() {
       console.log(currentSlide)
      if (currentSlide === length) { //Stop incremening currentSlide here so that it'll be easier to increment later
        currentSlide = 1;
        margin = 0;
        $slideContainer.css('margin-left', 0);
      }
    });
  }

  function contSlider() { //changed from startSlider to contSlider
    interval = setInterval(function() {
      margin -= width; //minus width from the margin
      currentSlide++; //Stop incremening currentSlide here
      Slider() //tell broswer "insert slider code here"
    }, pause);
  }

  function pauseSlider() {
    clearInterval(interval);
  }
  
  function three() {
    clearInterval(interval); //Stop the orignal slider
    Slider(); //Immediately perform the slider function
    contSlider(); //Continue the slider function
  }

  function prevSlider() {
    if (currentSlide > 1) { //Don't run code if first slide
      currentSlide--; //Minus 1 from currentSlide
    } else { //if the first slide, move it to the last one
      margin = -width * (length - 1); //margin is the value of the last slide
      $slideContainer.css('margin-left', margin); //move to the last slide instantly
      currentSlide = (length - 1) //make current slide the second last slide (slide 5)
    }
    
    margin += width; //Plus a  width (to make it move to the previous slide
    three(); //Run the three functions
  }

  function nextSlider() {
    if (currentSlide < length){  //Don't run code if last slide
    margin -= width; //Minus a width (to make it move to the previous slide
    currentSlide++; //Plus 1 from currentSlide
    }
    three(); //Run the three functions
  }

  $slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', contSlider);

  //Make the functions happen when their buttons are clicked (This could be anything)
  $(".prev-slide").on("click", prevSlider);
  $(".next-slide").on("click", nextSlider) //

  contSlider();


});

＆＃13;

.button {  display: none  }

#slider:hover .button {
  display: block;
  font-size: 3em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 180px;
  cursor: pointer;
}

.prev-slide {
  left: 10px;
}

.next-slide {
  right: 10px;
}

#slider {
  width: 720px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 400px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 400px;
}


/* helper css, since we don't have images */

.slide1 {
  background: red;
}

.slide2 {
  background: blue;
}

.slide3 {
  background: green;
}

.slide4 {
  background: purple;
}

.slide5 {
  background: pink;
}

＆＃13;

如何将下一个上一个按钮添加到js jQuery滑块？

2 个答案: