我有一个响应式图像滑块，该滑块的宽度和高度将使用百分比进行调整，我无法避免百分比。所以我首先找到图像高度并将其应用于包含图像的父 div。但它在任何地方都可以工作，除了铬。resize() 工作正常，但是一旦我刷新页面高度在 chrome 中变为零。
html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="slider">
<!-- <div class="sliderMask"> -->
<ul class="sliderWrapper">
<li><img src="images/one.jpg" alt="one" ></li>
<li><img src="images/two.jpg" alt="two" ></li>
<li><img src="images/three.jpg" alt="three"></li>
<li><img src="images/one.jpg" alt="one" ></li>
<li><img src="images/two.jpg" alt="one" ></li>
<li><img src="images/two.jpg" alt="one" ></li>
</ul>
<!-- </div> -->
<div class="triggersMask">
<ul class="triggers">
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
<span class="control prev"></span>
<span class="control next"></span>
</div>
</body>
</html>
css
@charset "utf-8";
.slider{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
ul.sliderWrapper {
position:relative;
top:0px;left:0px;
margin-left: 0px;
margin-top: 0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li {
position:absolute;
left:0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li img{
width: 100%;
height: auto;
}
.triggersMask{
background: none repeat scroll 0 0 #000000;
bottom: 0;
margin: 0 auto;
padding: 10px 5px;
position: absolute;
text-align: center;
width: 100%;
}
ul.triggers {
display: block;
margin: 0 auto;
}
ul.triggers li {
margin:0 5px;
padding:2px 8px;
font: bold 26px;
cursor:pointer;
color:red;
display: inline;
width: 15px;
height: 15px;
list-style: none;
}
ul.triggers li.selected {
color:#fff;
}
.control {position:absolute; top: 33%; color:#000; cursor:pointer; width: 16px; height: 25px;}
.prev {
left:20px;
background: url(../images/prev.png) no-repeat;
}
.next {
right:20px;
background: url(../images/next.png) no-repeat;
}
js
// JavaScript Document
function slideCarousal() {
var triggers = $('ul.triggers li');
var sliderWrapper = $('ul.sliderWrapper li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('selected');
sliderWrapper.hide().first().show();
function sliderResponse(target) {
sliderWrapper.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');
}
sliderWrapper.on('click touchend', function(){
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
triggers.click(function() {
if ( !$(this).hasClass('selected') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.selected').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },3000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },3000);
}
}
// height function
function imageHeightSet() {
var imageAutoHeight = $('ul.sliderWrapper li img').height();
$('.slider').css("height",imageAutoHeight+"px");
}
$(document).ready(function() {
slideCarousal() ;
//height
imageHeightSet() ;
});
$(window).resize(function() {
imageHeightSet() ;
});
更新
请找到小提琴：小提琴示例