Jquery 滑块在某些浏览器中不工作
我有一个滑块,只有当屏幕有一定宽度时才会显示,我正在不同的浏览器上测试它。它只适用于firefox,而不适用于其他浏览器,如google chrome、IE和safari 这是我的htmlJquery 滑块在某些浏览器中不工作,jquery,css,slider,Jquery,Css,Slider,我有一个滑块,只有当屏幕有一定宽度时才会显示,我正在不同的浏览器上测试它。它只适用于firefox,而不适用于其他浏览器,如google chrome、IE和safari 这是我的html <div class="row max-width portfolio-container"> <div class="col-lg-12 col-md-12 col-sm-12"> <a class="port-left-arrow port-nav"&
<div class="row max-width portfolio-container">
<div class="col-lg-12 col-md-12 col-sm-12">
<a class="port-left-arrow port-nav">
<img src="images/left-arrow.png">
</a>
<div class="portfolioBanner-wrapper" style="">
<div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/vertical-image.jpg" style="display: block; left: 50%; margin-left: -130.5px; opacity: 1;">
</div>
<div class="portfolio_wrapper port-inactive_portfolio" style="left: -100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-6.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
<div class="portfolio_wrapper port-active_portfolio" style="left: 0%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-5.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
<div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-4.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
<div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-3.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
<div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-2.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
<div class="portfolio_wrapper port-inactive_portfolio" style="left: 100%;">
<img class="bgheight" src="http://localhost:8888/My-site/portfolio_images/omd-1.jpg" style="left: 50%; margin-left: -260.5px;">
</div>
</div>
<a class="port-right-arrow port-nav">
<img src="images/right-arrow.png">
</a>
</div>
</div>
我在本地测试了您的解决方案,它在IE Chorme Firefox中运行良好。你在哪个浏览器版本中测试过它?我的谷歌浏览器是38.0.2125.104,safari是6.1.6,IE是11
$(".port-nav").click(function(){
if($(".port-active_portfolio").css("left") != "0px") return false;
$direction = ($(this).hasClass("port-left-arrow") ? "left" : "right");
var activeBanner = 100;
if($direction == "right"){
$(".port-inactive_portfolio").css("left","100%");
activeBanner = -100;
if($(".port-active_portfolio").next().length < 1){
$(".portfolio_wrapper").eq(0).animate({"left":0+"%"}, 500,function(){
$(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
});
}else{
$(".port-active_portfolio").next().animate({"left":0+"%"}, 500,function(){
$(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
});
}
}else{
$(".port-inactive_portfolio").css("left","-100%");
if($(".port-active_portfolio").prev().length < 1){
$(".portfolio_wrapper").eq($(".portfolio_wrapper").length-1).animate({"left":0+"%"}, 500,function(){
$(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
});
}else{
$(".port-active_portfolio").prev().animate({"left":0+"%"}, 500,function(){
$(this).addClass("port-active_portfolio").removeClass("port-inactive_portfolio");
});
}
}
$(".port-active_portfolio").animate({"left":activeBanner+"%"}, 500,function(){
$(this).addClass("port-inactive_portfolio").removeClass("port-active_portfolio");
});
});
.portfolioBanner-wrapper {
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 80%;
padding:0 0 50% 0;
}
.portfolio_wrapper{
height: 100%;
margin: 0;
min-height: 100%;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.portfolio_wrapper img {
position: absolute;
top: 0;
}
.port-inactive_portfolio{
left: -100%;
}
.portfolio_wrapper .relative{
width: 100%;
height: 100%;
position: relative;
}
.port-right-arrow {
position: absolute;
right: 30px !important;
top: 29.7%;
z-index: 1000;
display: block;
}
.port-right-arrow img {
width: 30px;
}
.port-left-arrow {
background: none repeat scroll 0 0 pink;
left: 9px;
position: absolute;
width: 67px;
top: 29.7%;
display: block;
}
.port-left-arrow img {
width: 30px;
}
.office-images {
margin-top: 71px;
}
.content-inner {
margin-left: 24px;
width: 67%;
}
.bg-home {
height: 553px;
}