Javascript 未在IE上加载幻灯片
有人能告诉我为什么我的幻灯片在IE中不起作用吗 代码如下：Javascript 未在IE上加载幻灯片,javascript,jquery,css,internet-explorer,Javascript,Jquery,Css,Internet Explorer,有人能告诉我为什么我的幻灯片在IE中不起作用吗 代码如下： <html> <head> <style> .limiter * { transition:all 1s ease-in-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: transl
<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>
.限制器*{
过渡：所有1都易于输入输出；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
身体{
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字体大小：300；
}
html，正文{
身高：100%；
}
身体{
保证金：0；
填充：0；
溢出：隐藏；
背景色：黑色；
}
img{
边界：0；
}
.宽{
宽度：5000px；
身高：100%；
溢出：隐藏；
z指数：1；
显示：无；
}
.宽分区限制器{
溢出：隐藏；
位置：绝对位置；
}
.宽.限制器.续{
位置：相对位置；
身高：100%；
宽度：100%；
}
.宽.限制器.数据{
位置：绝对位置；
排名：0；
左：0；
宽度：60%；
身高：60%；
填料：110px 25%20%20%；
字体大小：35px；
颜色：白色；
}
.宽.限制器.数据分区{
宽度：100%；
身高：100%；
文本对齐：左对齐；
}
.宽.限制器.数据分区a{
文字装饰：无；
颜色：白色；
}
.宽.限制器.数据分区a:悬停{
颜色：#666；
}
正文{
宽度：8000px；
}
.菜单{
宽度：150px；
位置：固定；
左：-150px；
身高：100%；
z指数：5；
背景色：rgba（0,0,0,5）；
}
.菜单.标志{
宽度：100px；
高度：100px；
}
.菜单ul{
列表样式：无；
}
李先生{
列表样式：无；
}
.菜单李a{
颜色：#FFF；
文字装饰：无；
字体大小：14px；
}
.菜单李a{
颜色：#CCC；
}
.菜单a:悬停{
颜色：#CFCFCF；
}
.装货{
宽度：100%；
身高：100%；
z指数：0；
背景色：黑色；
位置：绝对位置；
排名：0；
左：0；
显示：无；
}
.装货.包装{
宽度：100%；
身高：100%；
位置：相对位置；
}
.装载.中心{
保证金：自动；
位置：绝对位置；
最高：50%；
宽度：800px；
左：50%；
利润上限：-100px；
左边距：-400px；
高度：200px；
文本对齐：居中；
颜色：#999；
}
.装载.导航提示{
字体大小：12px；
边际上限：0px；
边缘底部：100px；
颜色：#999；
位置：相对位置；
顶部：-30px；
}
.加载.滚动{
字号：80px；
}
.loading.loadhint{
字体大小：20px；
}
.装载杆{
位置：绝对位置；
底部：0；
高度：15px；
宽度：0px；
背景色：#999；
}
.标题{
位置：固定；
左：0；
底部：0；
宽度：100%；
高度：60px；
背景色：rgba（0,0,0,3）；
显示：无；
}
.说明.标志{
浮动：左；
高度：40px；
宽度：150px；
文本对齐：左对齐；
位置：相对位置；
顶部：0px；
}
.caption.logo img{
边界：0；
宽度：150px；
高度：60px；
}
.slidehint{
宽度：100%；
高度：10px；
}
.文本{
浮动：左；
宽度：60%；
高度：40px；
字体大小：11px；
左边距：30px；
位置：相对位置；
}
.textbooth{
位置：绝对位置；
宽度：100%；
底部：3；
颜色：#E0；
字体大小：11px；
}
.按钮{
宽度：120px；
浮动：对；
高度：40px；
位置：相对位置；
顶部：-3px；
右边距：30px；
}
.按钮，左边{
浮动：左；
显示：无；
}
.按钮。左：悬停{
光标：指针；
不透明度：0.7；
}
.按钮，对{
显示：无；浮动：右；
}
.按钮。右：悬停{
光标：poi