0
我正在研究一些初始化多个滑块的脚本。这些滑块在间隔时间内自动播放，但当我将鼠标悬停在单个滑块上时，我想停止该间隔。我拥有的代码并不像我预期的那样工作，并且当我将鼠标悬停在任一滑块上时似乎只是停止最后一个滑块。任何人都可以帮助建议我为什么这是？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>
\t \t </li>
\t \t <li style="background: yellow;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li>
\t \t <li style="background: red;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li><li style="background: red;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li>
\t </ul>
\t </div>
\t <div id="slider-2" class="slider">
\t <a href="#" class="control_next">></a>
\t <a href="#" class="control_prev"><</a>
\t <ul id="slide-list">
\t \t <li style="background: pink;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li>
\t \t <li id="image-item" style="background: blue;">
\t \t \t <img src="get-the-look-rc.jpg">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>This is the last sentence.</p>
\t \t </li>
\t \t <li style="background: yellow;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li>
\t \t <li style="background: red;">
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t \t <p>Lorum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum ipsum lorum ipsum</p>
\t \t </li>
\t </ul>
\t </div>