[英]Please help me convert this script to a simple image slider
Can some please, PLEASE! 可以请一些! help me with this problem.
帮助我解决这个问题。 Okay so I have a code that at first I thought worked well but I forgot that when the default
<img src="test-img-1.jpg" class="actual-img">
content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. 好的,所以我有一个代码,起初我认为效果很好,但是我忘记了,当默认的
<img src="test-img-1.jpg" class="actual-img">
内容加载时,这三个按钮中的第一个图片下方的图片应采用我为活动按钮指定的活动CSS状态。 Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. 现在我想要的是,通过将css隐藏的内容加载到“ .image-area” div中,使此小代码表现得像普通滑块一样,当我单击按钮时它可以工作。 Problems only surface when I am I trying to give the first loaded content an active state.
当我尝试使第一个加载的内容处于活动状态时,问题才浮出水面。 One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2"> <div class="img-area-wrapper"> <img src="test-img-2.jpg" class="actual-img"> </div> </div>
) while somehow letting the first button be set to active. 我认为可以解决此问题(我无法实现)的一种方法是让第一个即时默认内容成为该内联隐藏div:(
<div id="image-area2"> <div class="img-area-wrapper"> <img src="test-img-2.jpg" class="actual-img"> </div> </div>
),同时将第一个按钮设置为活动状态。 I should also mention that I'm not the best with jquery. 我还应该提到,使用jquery并不是最好的方法。 Please help me fix this someone!
请帮我解决这个人!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/ 这是一个小提琴,可以使您更好地理解: http : //jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know. 如果我的解决方法完全荒唐,请告诉我。
this is my code: 这是我的代码:
<script type="text/javascript">
$(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');
});
});
</script>
this is my html: 这是我的HTML:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.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>
and this is my css: 这是我的CSS:
#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;
}
Problems only surface when I am I trying to give the first loaded content an active state
问题只有在我尝试使第一个加载的内容处于活动状态时才浮出水面
Does this mean that you want to add a class to the first button? 这是否意味着您要向第一个按钮添加类?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes: 可以使用类和索引来代替使用滑块的项目ID和重置html内容:
CSS: CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript: JavaScript的:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.