我正在为一个网站使用这个 slider :
我正在努力实现两个相对简单的事情 - 如何确保它自动循环显示图像以及控件似乎有点错误 - 所以如果你单击第三个导航图标以显示三个图像并单击返回它不会'不显示原图？
我曾尝试对其进行编辑但没有成功 - 我还尝试添加第四张幻灯片但失败了？
<script>
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<img src="img/cookie.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<img src="img/courtyard.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="img/window.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
<a href="image-area" class="o-links"> </a>
<a href="image-area2" class="o-links"> </a>
<a href="image-area3" class="o-links"> </a>
</div>
</div>
</div>
</section>
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}
最佳答案
试试这个:-
$(document).ready(function() {
$('#image').html($('#image-area').html());
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
关于jquery - 图像 slider 自动循环功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22662892/