jquery悬停功能在多个滑块上无法正常工作

时间：2017-02-21 20:38:59

标签： javascript jquery

我正在开发一些初始化多个滑块的脚本。这些滑块按间隔自动播放，但是当我将鼠标悬停在其上时，我想停止单个滑块的间隔。我所拥有的代码并不像我预期的那样工作，当我将鼠标悬停在任一滑块上时，它似乎停止了最后一个滑块。谁能帮忙告诉我为什么会这样？

function startSlider(justLoaded, item) {
  var slideCount = $('#' + item + ' ul li').length;
  var slidePercent = (slideCount * 100) + "%";
  $('#' + item + ' ul').css({
    width: slidePercent
  });
  var percentWidth = (100 / slideCount) + "%";
  $('#' + item + ' ul li').css({
    width: percentWidth
  });
  var indvSlideWidth = $('#' + item + ' ul li').width();
  var percentHolder = "-100%";
  $('#' + item + ' ul').css({
    marginLeft: percentHolder
  });
  if (justLoaded) {
    $('#' + item + ' ul li:last-child').prependTo('#' + item + ' ul');
  }
  return indvSlideWidth;
}

function moveLeft(slideWidthPx, item) {
  $('#' + item + ' ul').animate({
    left: +slideWidthPx
  }, 200, function() {
    $('#' + item + ' ul li:last-child').prependTo('#' + item + ' ul');
    $('#' + item + ' ul').css('left', '');
  });
};

function moveRight(slideWidthPx, item) {
  $('#' + item + ' ul').animate({
    left: -slideWidthPx
  }, 300, function() {

    $('#' + item + ' ul li:first-child').appendTo('#' + item + ' ul');
    $('#' + item + ' ul').css('left', '');
  });
};
jQuery(document).ready(function() {
  $(".slider").each(function() {
    //1)
    var slideWidthPx = startSlider(true, this.id);
    var item = this.id;
    //2)
    $prevBtn = $('#' + this.id + ' a.control_prev');
    $prevBtn.bind('click', {
      id: this.id
    }, function(event) {
      var data = event.data;
      moveLeft(slideWidthPx, data.id);
    });

    $nextBtn = $('#' + this.id + ' a.control_next');
    $nextBtn.bind('click', {
      id: this.id
    }, function(event) {
      var data = event.data;
      moveRight(slideWidthPx, data.id);
    });
    $timer = setInterval(function() {
      moveRight(slideWidthPx, item)
    }, 3000);
    $('#' + item).hover(function() {
        console.log("you have hovered" + '#' + item);
        clearInterval($timer);
      },
      function() {
        $timer = setInterval(function() {
          moveRight(slideWidthPx, item)
        }, 3000);
        console.log("interval reapplied to" + item);
      });
  })
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

.slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
  width: 100%;
}

.slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  list-style: none;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
}

.slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background: #ccc;
  text-align: center;
}

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>
<h1>Incredibly Basic Slider</h1>
<div id="slider-1" class="slider">
  <a href="#" class="control_next"> > </a>
  <a href="#" class="control_prev">
    < </a>
      <ul id="slide-list">
        <li style="background: pink;">
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
        </li>
        <li id="image-item" style="background: blue;">
          <img src="get-the-look-rc.jpg">
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
          <p>This is the last sentence.</p>
          <button onclick="setHeight()">Click here<button>
		</li>
		<li style="background: yellow;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
		<li style="background: red;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li><li style="background: red;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
	  </ul>  
	</div>

	<div id="slider-2" class="slider">
	  <a href="#" class="control_next">></a>
	  <a href="#" class="control_prev"><</a>
	  <ul id="slide-list">
		<li style="background: pink;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
		<li id="image-item" style="background: blue;">
			<img src="get-the-look-rc.jpg">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>This is the last sentence.</p>
		</li>
		<li style="background: yellow;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
		<li style="background: red;">
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
			<p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
		</li>
	  </ul>  
	</div>

1 个答案:

答案 0 :(得分：0)

将var添加到$timer变量

var $timer = setInterval(function(){ moveRight(slideWidthPx, item) }, 3000);
   $('#' + item).hover(function() {  
   console.log("you have hovered" + '#' + item);
   clearInterval($timer);
},
相关问题
最新问题