私は自分のjqueryスライダーで作業しています。ChromeとFireFoxでは正しく機能しますが、IEでは機能しません。これが私のスクリプトです。誰かがそれに対する解決策を持っていますか？
これが私のCSSです：
<style>
#rol{
display: block;
width:950px;
height:154px;
margin:0 auto;
overflow:hidden;
}
#rol .prev-r,.next-r{
position:absolute;
margin-top:60px;
width:11px;
height:37px;
cursor:pointer;
}
#pos{
width:1500px;
float:left;
}
.next-r{
background:url(/themes/classic/images/slider/rol-next.png) no-repeat;
}
.prev-r{
background:url(/themes/classic/images/slider/rol-prev.png) no-repeat;
}
.next-r:hover{
background:url(/themes/classic/images/slider/rol-next.png) no-repeat 0 -50px;
}
.prev-r:hover{
background:url(/themes/classic/images/slider/rol-prev.png) no-repeat 0 -50px;
}
.partner-box {
color: white;
width: 218px;
height: 154px;
border: ridge 1px #666;
background-color: #16455D;
float: left;
margin: 0 10px 0 8px;
}
</style>
そしてそれは私のhtmlです：
<div id="rol">
<p style="float:left;margin-left:-20px;display:block;" class="prev-r"></p><p style="float:left;margin-left:960px;display:none;" class="next-r"></p>
<div id="pos">
<div class="partner-box">
<img src="partner/5prime.jpg" width="218" height="65" />
<p>
Nucleic Acid Purification, PCR and RT PCR, Molecular Biology Reagents, Lab Essentials and Accessories ...
</p>
<a class="read-more" href="/partners/view/5prime">Read More</a>
</div>
<div class="partner-box">
<img src="partner/metabion_header.jpg" width="218" height="65" />
<p>
Oligonucleotides & Peptides :<br/> DNA, RNA, ZNA, Dual labeled probes, Light Cycler probes, Peptides, Antibodies
</p>
<a class="read-more" href="/partners/view/metabion">Read More</a>
</div>
<div class="partner-box">
<img src="partner/54564.jpg" width="218" height="65" />
<p>
We supply wide range of Real Time PCR, PCR and FEP kits for molecular diagnostics from InterLab Service Company ...
</p>
<a class="read-more" href="/partners/view/interlabservice">Read More</a>
</div>
<div class="partner-box">
<img src="partner/logo_corpo[1].jpg" width="218" height="65" />
<p>
IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
</p>
<a class="read-more" href="/partners/view/Ipsogen">Read More</a>
</div>
<div class="partner-box">
<img src="partner/partner_cytocell.gif" width="218" height="65" />
<p>
IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
</p>
<a class="read-more" href="/partners/view/cytocell">Read More</a>
</div>
<div class="partner-box">
<img src="partner/aid.jpg" width="218" height="65" />
<p>
IPSOGEN is currently the world leader in blood cancer molecular diagnostics ...
</p>
<a class="read-more" href="/partners/view/Aid-Diagnostika">Read More</a>
</div>
</div>
</div>
そして最後にここに私のjqueryスクリプトがあります。私はjquery-1.7.1.min.jsを使用します：
<script type="text/javascript">
$(document).ready(function() {
//img floating
var lock = true;
$('.prev-r').click(function() {
if(lock == true){
lock = false;
var mleft = $('#pos').css('marginLeft');
var mleft = mleft.slice(0,-2);
var mleft = parseInt(mleft);
var mleft = Math.abs(mleft);
var left = 240;
var next = mleft+left;
chdis(next);
$('#pos').animate({
'marginLeft':'-'+next
},"slow",function(){
lock = true
});
}
});
$('.next-r').click(function() {
if(lock == true){
lock = false;
var mleft = $('#pos').css('marginLeft');
var mleft = mleft.slice(0,-2);
var mleft = parseInt(mleft);
var mleft = Math.abs(mleft);
var left = 240;
var next = mleft-left;
chdis(next);
$('#pos').animate({
'marginLeft':'-'+next
},"slow",function(){
lock = true
});
}
});
function chdis(next){
if(next == 0){
$('.next-r').css('display','none');
}else{
$('.next-r').css('display','block');
}
var img = $("#pos img").length;
var img = img * 240;
var img = Math.abs(img);
var img = img - 950;
if(next == 480){
$('.prev-r').css('display','none');
}else{
$('.prev-r').css('display','block');
}
}
});