为什么我的JQuery Slider无法在IE7中使用? [英] Why is my JQuery Slider not working in IE7?

问题描述

我在网站的主页上实现了一个JQuery滑块，但是它不适用于IE7，它只是显示列表中的所有图像.它可以在Chrome，Safari和Firefox中运行.

jQuery代码:

I have a JQuery slider implemented on the homepage of my site, however it is not working in IE7, it simply just shows all of the images in a list. It works in Chrome, Safari and Firefox.

JQuery Code:

<script>
        $(document).ready(function() {
            $('#slides').slides({
                preload: true,
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
    </script>

我的HTML代码:

My HTML Code:

<div class="slides_container">

<div class="slide">

<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide1.gif" alt="" title="homeslide1" width="900" height="350" class="alignnone size-full wp-image-2088" />

</div>


<div class="slide">

<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide2.gif" alt="" title="homeslide2" width="900" height="350" class="alignnone size-full wp-image-2089" />

</div>


<div class="slide">

<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide3.gif" alt="" title="homeslide3" width="900" height="350" class="alignnone size-full wp-image-2090" />

</div>

</div> <!-- End Slides Container -->

<a href="" class="prev"><img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/arrowLeft1.png" alt="" title="arrowLeft" width="19" height="22" class="alignnone size-full wp-image-2091" /></a>

<a href="" class="next"><img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/arrowRight1.png" alt="" title="arrowRight" width="19" height="22" class="alignnone size-full wp-image-2092" /></a>

我的CSS代码:

My CSS Code:

#page #container {
z-index: 100;
position: relative;
}
#example {
width:900px;
height:350px;
z-index: 100;
}
#slides {
z-index: 100;
}
.slides_container {
width:900px;
overflow:hidden;
}
.slides_container div.slide {
width:900px;
height:350px;
display:block;
}
#slides .next, #slides .prev {
position:absolute;
top:164px;
left:0px;
width:19px;
height:22px;
display:block;
z-index: 999;
}
#slides .next {
left:878px;
}

有什么想法可以让我的滑块在IE7中工作吗?

Any ideas how I can get my slider working in IE7?

推荐答案

(document).ready(function(){

(document).ready(function() {

(' #slides').slides({ 预加载: true ， 播放: 5000 ， 暂停: 2500 ， hoverPause: true ， animationStart:function(current){

('#slides').slides({ preload: true, play: 5000, pause: 2500, hoverPause: true, animationStart: function(current){

(' .caption').animate({ 底部:-35 }， 100 )； 如果(window.console& console.log){ // 返回当前幻灯片编号的示例 console.log(' 动画从幻灯片开始:'，当前)； }; }， animationComplete:函数(当前){

('.caption').animate({ bottom:-35 },100); if (window.console && console.log) { // example return of current slide number console.log('animationStart on slide: ', current); }; }, animationComplete: function(current){

这篇关于为什么我的JQuery Slider无法在IE7中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！