谁能告诉我为什么我的幻灯片在 IE 中不工作？
http://henrybuiltfurniture.com/new/index.php
代码如下:
<html>
<head>
<style>
.limiter * {
transition:all 1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
html, body{
height:100%;
}
body{
margin:0;
padding:0;
overflow:hidden;
background-color:black;
}
img{
border:0;
}
.wide{
width:5000px;
height:100%;
overflow: hidden;
z-index: 1;
display:none;
}
.wide div.limiter{
overflow: hidden;
position: absolute;
}
.wide .limiter .cont{
position: relative;
height: 100%;
width: 100%;
}
.wide .limiter .data{
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
padding: 110px 25% 20% 20%;
font-size: 35px;
color: white;
}
.wide .limiter .data div{
width:100%;
height:100%;
text-align: left;
}
.wide .limiter .data div a{
text-decoration: none;
color: white;
}
.wide .limiter .data div a:hover{
color:#666;
}
body {
width: 8000px;
}
.menu{
width: 150px;
position: fixed;
left: -150px;
height: 100%;
z-index: 5;
background-color: rgba(0, 0, 0, .5);
}
.menu .logo{
width:100px;
height:100px;
}
.menu ul{
list-style: none;
}
.menu li{
list-style: none;
}
.menu li a{
color:#FFF;
text-decoration: none;
font-size: 14px;
}
.menu li a.active{
color:#CCC;
}
.menu li a:hover{
color:#CFCFCF;
}
.loading{
width: 100%;
height: 100%;
z-index: 0;
background-color: black;
position: absolute;
top: 0;
left: 0;
display:none;
}
.loading .wrap{
width: 100%;
height: 100%;
position: relative;
}
.loading .center{
margin: auto;
position: absolute;
top: 50%;
width: 800px;
left: 50%;
margin-top: -100px;
margin-left: -400px;
height: 200px;
text-align: center;
color:#999;
}
.loading .navhint{
font-size: 12px;
margin-top:0px;
margin-bottom: 100px;
color:#999;
position: relative;
top:-30px;
}
.loading .scroll{
font-size: 80px;
}
.loading .loadhint{
font-size: 20px;
}
.loadingBar{
position: absolute;
bottom: 0;
height: 15px;
width: 0px;
background-color: #999;
}
.caption{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, .3);
display: none;
}
.caption .logo{
float:left;
height:40px;
width:150px;
text-align: left;
position: relative;
top:0px;
}
.caption .logo img{
border:0;
width:150px;
height:60px;
}
.slidehint{
width:100%;
height:10px;
}
.text{
float:left;
width:60%;
height:40px;
font-size: 11px;
margin-left:30px;
position: relative;
}
.textbottom{
position: absolute;
width:100%;
bottom: 3;
color: #e0e0e0;
font-size: 11px;
}
.buttons{
width:120px;
float:right;
height:40px;
position:relative;
top:-3px;
margin-right: 30px;
}
.buttons .left{
float:left;
display: none;
}
.buttons .left:hover{
cursor: pointer;
opacity: 0.7;
}
.buttons .right{
display:none; float:right;
}
.buttons .right:hover{
cursor: pointer;
opacity: 0.7;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 32px;
width: 32px;
}
.br{
height: 15px;
width: 20px;
}
.data div{
font-size: 24px;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/mousewheel/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
var ww;
var wh;
var oldviewing = 0;
var viewing = 1;
var scrolling = 0;
var scrolldir = 0;
var blockdelta = false;
var menu = 0;
var images = 1;
var loaded = false;
var defCaption;
var curCaption;
var captions = [];
var already_visited = true;
window.onresize = function(){
ww = $(window).width()+2;
wh = $(window).height();
resizeImages();
}
$(document).ready(function(){
document.ontouchmove = function(e){
e.preventDefault();
}
$(".menu").css({left:"0px"});
$(".menubar").css({visibility:"none"});
if(!(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent) )){
$(".mobile_css").html("");
}
//window properties
ww = $(window).width()+2;
wh = $(window).height();
defCaption = "";
curCaption = defCaption;
captions[1] = "";
if(captions[1]){
curCaption = captions[1];
$(".textbottom").html(captions[1]);
}else{
curCaption = defCaption;
}
setTimeout(function(){
$(".loading").fadeIn(500);
}, 500)
setInterval(function(){
if(scrolling && scrolldir != 2 && scrolldir != 0){
if(scrolldir == -1){
prev();
}else if(scrolldir == 1){
next();
}
scrolling = 0;
}
if(loaded == false && $("body").scrollLeft() != 0){
$("body").scrollLeft(0);
}
}, .05);
$("body").mousewheel(function(event, delta, deltaX, deltaY) {
if(scrolldir == 2){
blockdelta = true;
}else if(blockdelta == true){
if(Math.abs(deltaX) <= 10 && Math.abs(deltaY) <= 1){
blockdelta = false;
}
}
if(blockdelta == true){
deltaX = 0;
deltaY = 0;
}
if(Math.abs(deltaX) > 10){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaX < 0){
scrolldir = -1
}
}
}else if(Math.abs(deltaY) > 1){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaY < 0){
scrolldir = -1
}
}
}
event.preventDefault();
});
$(".caption .buttons .right").click(function(){
next();
});
$(".caption .buttons .left").click(function(){
prev();
});
});
function changeCaption(i){
if(captions[i]){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(captions[i]);
$(".textbottom").fadeIn(300);
});
}else if(curCaption != defCaption){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(defCaption);
$(".textbottom").fadeIn(300);
});
}
}
function resizeImages(){
$('body')[0].scrollLeft = ww*(viewing-1);
for(i=1; i<=images; i++){
//$("html")[0].scrollLeft(viewing*ww);
//picture properties
pw = $("#img"+i)[0].width;
ph = $("#img"+i)[0].height;
//size calculation
ph = (ww/pw)*ph;
pw = ww;
if(ph < wh){
pw = (wh/ph)*pw;
ph = wh;
}
//image resizage
$("#img"+i).css({width:pw, height:ph, position:"absolute", top:Math.round(-1*(wh - (wh/ph)*wh)/2), left:Math.round(-1*(ww - (ww/pw)*ww)/2)});
$("#limiter"+i).css({width:ww, height:wh, position:"absolute", left:(i-1)*ww});
$(".wide").css({width:images*ww, height:wh});
}
}
var total = 0;
function bump(){
$('body')[0].scrollLeft = 0;
goal = images;
total++;
if(already_visited){
$(".load").html("( loading "+total+" of "+images+" images ... )");
resizeImages();
$(".center").hide()
$(".wide").show();
$(".caption").show();
$(".menubar").show();
loaded = true;
}else{
$(".load").html("( loading "+total+" of "+images+" images ... )");
$(".loadingBar").animate({width: total*$(window).width() / images}, 200, function(){
if(total >= goal){
resizeImages();
setTimeout(function(){
$(".center").fadeOut(700, function(){
$(".wide").fadeIn(500);
$(".caption").fadeIn(500);
$(".menubar").fadeIn(500);
});
loaded = true;
setTimeout(function(){
}, 500);
}, 800);
}
});
}
}
var image_change_speed = 600;
function next(){
if(viewing < images){
scrolldir = 2;
changeCaption(viewing+1);
$('body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing++;
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
});
}
}
function prev(){
if(viewing > 1){
scrolldir = 2;
changeCaption(viewing-1);
$('body').animate({scrollLeft: $("#limiter"+(viewing-1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing--;
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
});
}
}
</script>
</head>
<body>
<div class="loading">
<div class="wrap">
<div class="center">
<div class="scroll">Home</div>
<div class="load">( loading 0 of 1 images ... )</div>
</div>
</div>
<div class="loadingBar"></div>
</div>
<div class="menu">
<div class="logo">
</div>
<ul>
<li><a href="index.php?p=chair">Chair 2</a></li>
<li><a href="index.php?p=desk">Desk</a></li>
<li><div class="br"></div></li>
<li><a href="index.php?p=wave-stool">Wave Stool</a></li>
<li><div class="br"></div></li>
<li><a href="index.php?p=steel-table-4">Steel Table 4</a></li>
<li><a href="index.php?p=steel-table-5">Storage Table</a></li>
<li><div class="br"></div></li>
<li><a href="index.php?p=wood-table-5">Wood Table 5</a></li>
<li><a href="index.php?p=wood-table-6">Wood Table 6</a></li>
<li><div class="br"></div></li>
<li><a href="index.php?p=wave-bench">Wave Bench</a></li>
<li><a href="index.php?p=scoop-bench">Scoop Bench</a></li>
<li><div class="br"></div></li>
<li><a href="index.php?p=hb-kitchens">HB Kitchens</a></li>
<li><a href="index.php?p=hb-opencase">HB Opencase</a></li>
<li><div class="br"></div></li>
<li><a href="archive.php">Image Archive</a></li>
<br class="mobile_br" />
<br />
<li><a class="active" href="index.php?p=home"><img src="images/home.png" /></a></li>
<li><a href="index.php?p=company">The Company</a></li>
<li><a href="index.php?p=quality">Quality</a></li>
<li><a href="index.php?p=contact">Contact Us</a></li>
</ul>
</div>
<div class="wide">
<div id="limiter1" class="limiter">
<div class="cont">
<img src="images/1_1.jpg" id="img1" alt="img1" onload="bump();" class="slideimage"/>
<div class="data">
<div>
</div>
</div>
</div>
</div>
</div>
<div class="caption">
<div class="logo">
<a href="http://henrybuilt.com">
<img src="images/logo.png" alt="henrybuilt"/>
</a>
</div>
<div class="slidehint">
</div>
<div class="text">
<div class="textbottom">
</div>
</div>
<div class="buttons">
<div class="left">
<img src="images/lArrow.png" alt="left"/>
</div>
<div class="right">
<img src="images/rArrow.png" alt="right"/>
</div>
</div>
</div>
<div class="mobile_css">
<style>
.br{
height: 5px;
}
.wide .limiter .data{
font-size: 1em;
}
.wide .limiter .data div{
position: relative;
top: -50px;
}
.caption{
height: 10%;
min-height: 80px;
}
.buttons{
width:300px;
height:100%;
width: auto;
}
.buttons img{
height: 80%;
}
.caption .logo, .caption .logo img{
height: 100%;
width: auto;
}
.caption .logo{
width: auto;
}
.text{
display: none;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 100px;
width: 100px;
}
.menu{
background-color: rgba(0, 0, 0, 0.95);
}
.menu .logo{
width:100px;
height:0px;
}
.menu li a{
position: relative;
top: -10px;
font-size: 0.9em
}
.menu ul{
margin-left: -20px;
}
.data div{
font-size: 36px;
}
.mobile_br{
display: none;
}
</style>
</div>
</body>
</html>
最佳答案
将 DOCTYPE 添加到您的 html 代码中!(您在某些页面上没有它)
http://www.w3schools.com/tags/tag_doctype.asp
否则 IE 会切换到 Quirks 模式，其行为可能会出乎意料。
关于javascript - 幻灯片无法在 IE 上加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26228606/