制作滑块我遇到了一个问题。当我将按钮悬停在图像下方(它们是标签)时,滑块的循环必须停止。当它出局时 - 它会回到循环中。不能理解我错在哪里。请参阅代码段或in this link.
中的代码
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
答案 0 :(得分:1)
有关工作示例,请参阅此JSFiddle。
但是,如果您的停留时间超过超时时间,则不会调用changeto(),您需要将changeto()添加到“mouseleave”处理程序。
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>