0
私のコードは、IE以外のすべてのブラウザで完全に機能します。私は運がないフォーラムで見つけることができるすべてのソリューションを試しました。私はまだJavaScriptを学んでいるので、後でjQueryを学びます。問題は、IEではスライドが垂直に表示され、効果がないことです。ここに私のコードは次のとおりです。jQueryスライダがIEで動作しない
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet...css" rel="stylesheet" type="text/css" />
<title>div test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: false
});
$('#bx-prev').click(function() {
slider.goToPreviousSlide();
return false;
});
$('#bx-next').click(function() {
slider.goToNextSlide();
return false;
});
});
</script>
</head>
<body>
<div id="slider1">
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>page3</div>
<div>page4</div>
</div>
<div id="bx-next">next</div>
<div id="bx-prev">prev</div>
</body>
</html>
そして、ここでは私のスタイルシートは、次のとおりです。
div#head {
width:100%;
height:100px;
/*background-color:antiquewhite;*/
margin-bottom:100px;
}
div#content {
border-left: 2px solid #F0F8FF;
border-right: 2px solid #8a815d;
border-top: 2px solid #8a815d;
border-bottom: 2px solid #8a815d;
width:400px;
height:300px;
-webkit-border-radius: 0px 28px 20px 0px;
-moz-border-radius: 0px 28px 20px 0px;
border-radius: 0px 28px 20px 0px;
font-family:Arial,Helvetica,sans-serif;
color:#8a815d;
padding-left:100px;
background-color:#F0FFFF;
background-color: rgba(215,227,211,0.3);
position:relative;
top:20px;
left:0px
}
div#wrapper {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
div#main {
/* background-color:black;*/
width:50%;
height:360px;
float:left;
}
div#rash {
float:right;
/*background-color:blue;*/
height:360px;
width:50%;
}
body {
background-color: #E8F3F9;
background-image: url('squares layer.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/*next button*/
#bx-next {
position:absolute;
top:45%;
right:3px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_next.png) no-repeat 0 -30px;
}
/*previous button*/
#bx-prev {
position:absolute;
top:45%;
left:4px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_prev.png) no-repeat 0 -30px;
}
コンソールにエラーがありますか？ jsfiddle.netにコードを投稿できますか？ – jbabey
あなたのJSコードが有効であると言います –
あなたはこのプラグインに対して正しいhtml構造を実装していないと思います...このプラグインを実装するための手順に従ってください。http://bxslider.com/ – SaurabhLP