0

我正在开发自己的 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');
        }
    }
});

4

1 回答 1

0

我发现了我的问题。

IE 自动设置#pos left-margin为auto。因此，当我尝试对其进行切片并想从其值中检索数字时（例如，想从 获取12）12px它给了我 au 代替（因为margin-left设置为auto）。
通过将left marginfor设置#pos为零，滑块也可以在 IE 中使用。
祝你好运

于 2012-09-09T18:40:00.170 回答