[英]Slider not working on firefox and chrome
I built a simple slider for a project.I tested it in chrome, and firefox and it doesn't work but it works fine IE10 release preview. 我为项目构建了一个简单的滑块,并在chrome和firefox中对其进行了测试,虽然它不起作用,但可以正常运行IE10版本预览。 Here is a fiddle of the slider http://jsfiddle.net/VhtWh/2/ 这是滑块的小提琴http://jsfiddle.net/VhtWh/2/
Here is the slider code 这是滑块代码
$(document).ready(function() {
// Let's make the first slide visible and hide the rest
$('#homepage-slides li').css('top','0').hide();
$('#homepage-slides li:first').addClass('slideActive').show().find('.slide-content').animate({left: '0', opacity: 1.0}, 800);
// Find all of the slides
var slides = $('#homepage-slides li');
var current = 0;
// Set up the slideshow
$('#homepage-slider .arrow').click(function(){
var li = slides.eq(current);
var nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('slide-right')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
} else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
current = nextIndex;
// Show next slide and slide/fade in the content
next.addClass('slideActive').fadeIn('slow').find('.slide-content').animate({left: '0', opacity: 1.0}, 800);
// Hide all other slides and slide/fade out the content
li.removeClass('slideActive').fadeOut('slow').find('.slide-content').animate({left: '-2400', opacity: 0}, 800);
// Hide next arrow after last slide
if ( nextIndex >= slides.length-1 ) {
$('#homepage-slider .arrow').addClass('hide');
}
});
});
PS: The navigation link does not highlight as set in the css in chrome and firefox, but works perfectly in IE10 PS:导航链接未按chrome和firefox中的CSS突出显示,但在IE10中完美显示
There is a problem with your z-indexes. 您的z索引有问题。 The arrows were NOT on top of your sliders. 箭头不在滑块上。
Avoid using 999 for your z-indexes. 避免将999用于z索引。 They don't help. 他们没有帮助。 Use values like 1, 2, 3 and it will make more sense. 使用1、2、3之类的值会更有意义。
I updated the JSFiddle: http://jsfiddle.net/VhtWh/3/ 我更新了JSFiddle: http : //jsfiddle.net/VhtWh/3/
Now, the arrows have z-index: 3
and the sliders have z-index: 2
. 现在,箭头的z-index: 3
和滑块的z-index: 2
。
This is the code: 这是代码:
#homepage-slider {
background: #050402;
min-width: 940px;
position: relative;
min-height: 450px;
z-index: 1;
}
#homepage-slider .slide-right,
#homepage-slider .slide-left {
color: white;
font-size: 14px;
height: 23px;
margin-top: -26px;
opacity: 0.7;
padding: 63px 10px 5px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 52px;
z-index: 3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#homepage-slider .slide-right {
right: 30px;
background: url(../../img/left.png) no-repeat scroll 10px 10px rgba(0, 0, 0, 0.4);
}
#homepage-slider .slide-right:hover {
cursor: pointer;
opacity: 1.0;
}
#homepage-slider .slide-left {
left: 20px;
display: none;
}
#homepage-slider #homepage-slides {
height: 450px;
list-style: none;
margin: 0;
min-width: 940px;
position: relative;
z-index: 2;
}
#homepage-slider #homepage-slides li {
margin: 0;
min-width: 940px;
width: 100%;
height: 336px;
z-index: 2;
position: absolute;
padding: 118px 0 0;
}
#homepage-slider #homepage-slides li .span7 {
position: relative;
height: 336px;
}
#homepage-slider #homepage-slides li .slide-content {
position: absolute;
}
#homepage-slider #homepage-slides li .slide-content h1 {
font-size: 48px;
color: white;
margin: 21px;
}
#homepage-slider #homepage-slides li .slide-content p {
color: #999999;
font-size: 30px;
letter-spacing: -0.015em;
letter-spacing: -1px;
line-height: 36px;
margin-bottom: 26px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.