是否可以跳入滑块？

Question

Is it possible to get a link to a specific slide? As soon as I select the link in my example the slider does not work anymore. Only the list item without function is displayed. When you select the link the slider should scroll to the corresponding slide. Is there a possibility for this? Any help will be appreciated. Thank You.

 jQuery(document).ready(function($) { $('#checkbox').change(function() { setInterval(function() { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: +slideWidth }, 200, function() { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function() { moveLeft(); }); $('a.control_next').click(function() { moveRight(); }); }); 

 #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#one">SLIDE 1</a> <br> <a href="#two">SLIDE 2</a> <br> <a href="#three">SLIDE 3</a> <br> <a href="#four">SLIDE 4</a> <br> <div id="slider"> <a href="#" class="control_next"> <p>&gt;</p> </a> <a href="#" class="control_prev"> <p>&lt;</p> </a> <ul> <li id="one">SLIDE 1</li> <li style="background: #aaa;" id="two">SLIDE 2</li> <li id="three">SLIDE 3</li> <li style="background: #aaa;" id="four">SLIDE 4</li> </ul> </div> 

Answer 1

You have to more work here - so this is what I did:

I. First I created a slideRight function that has a callback :

function slideRight(callback) {
    $('#slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('#slider ul li:first-child').appendTo('#slider ul');
      $('#slider ul').css('left', '');
      callback();
    });
}

II. Modified the links with an attribute data-peek that links to the corresponding slide like this:

<a href="#" class="peek" data-peek="one">SLIDE 1</a>

III. Now the following script will do the magic:

$('a.peek').click(function() {
    slide($('#slider ul'), $(this).attr('data-peek'));
  });

  function slide(el, peek) {
    if (el.find('li:nth-child(2)').attr('id') !== peek) {
      slideRight(function() {
        slide(el, peek);
      });
    }
  }

See demo below:

 jQuery(document).ready(function($) { $('#checkbox').change(function() { setInterval(function() { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: +slideWidth }, 200, function() { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function slideRight(callback) { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); callback(); }); } $('a.control_prev').click(function() { moveLeft(); }); $('a.control_next').click(function() { moveRight(); }); $('a.peek').click(function() { slide($('#slider ul'), $(this).attr('data-peek')); }); function slide(el, peek) { if (el.find('li:nth-child(2)').attr('id') !== peek) { slideRight(function() { slide(el, peek); }); } } }); 

 #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="peek" data-peek="one">SLIDE 1</a> <br> <a href="#" class="peek" data-peek="two">SLIDE 2</a> <br> <a href="#" class="peek" data-peek="three">SLIDE 3</a> <br> <a href="#" class="peek" data-peek="four">SLIDE 4</a> <br> <div id="slider"> <a href="#" class="control_next"> <p>&gt;</p> </a> <a href="#" class="control_prev"> <p>&lt;</p> </a> <ul> <li id="one">SLIDE 1</li> <li style="background: #aaa;" id="two">SLIDE 2</li> <li id="three">SLIDE 3</li> <li style="background: #aaa;" id="four">SLIDE 4</li> </ul> </div> 

EDIT :

And here is a solution without using a custom attribute - using id instead:

 jQuery(document).ready(function($) { $('#checkbox').change(function() { setInterval(function() { moveRight(); }, 3000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: +slideWidth }, 200, function() { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function slideRight(callback) { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); callback(); }); } $('a.control_prev').click(function() { moveLeft(); }); $('a.control_next').click(function() { moveRight(); }); $('a.peek').click(function() { slide($('#slider ul'), $(this).attr('id').split('_')[1]); }); function slide(el, peek) { if (el.find('li:nth-child(2)').attr('id') !== peek) { slideRight(function() { slide(el, peek); }); } } }); 

 #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="peek" id="link_one">SLIDE 1</a> <br> <a href="#" class="peek" id="link_two">SLIDE 2</a> <br> <a href="#" class="peek" id="link_three">SLIDE 3</a> <br> <a href="#" class="peek" id="link_four">SLIDE 4</a> <br> <div id="slider"> <a href="#" class="control_next"> <p>&gt;</p> </a> <a href="#" class="control_prev"> <p>&lt;</p> </a> <ul> <li id="one">SLIDE 1</li> <li style="background: #aaa;" id="two">SLIDE 2</li> <li id="three">SLIDE 3</li> <li style="background: #aaa;" id="four">SLIDE 4</li> </ul> </div>