Nivo 滑块不适用于 IE7

2023-12-12

我已经在这个网站上查看了很多关于 Nivo Slider 问题的帖子。我检查了 javascript 中的逗号,它看起来对我来说是正确的:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', 
        slices:15,
        animSpeed:500, 
        pauseTime:4000,
        startSlide:0,
        directionNav:false, 
        directionNavHide:false, 
        controlNav:true,
        controlNavThumbs:false, 
        controlNavThumbsFromRel:false, 
        controlNavThumbsSearch: '.jpg', 
        controlNavThumbsReplace: '_thumb.jpg', 
        keyboardNav:true,
        pauseOnHover:true, 
        manualAdvance:false, 
        captionOpacity:0.9, 
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, 
        lastSlide: function(){}, 
        afterLoad: function(){} 
    });
});
</script>

这是它引用的 html。文件夹路径似乎是正确的(毕竟,它在其他浏览器中工作!):

<div id="slider_wrapper">
        <div id="slider">
            <img src="/CoVPrototype/images/nivoslider/_img1.jpg" alt="" title="Discover City Parks" />
            <img src="/CoVPrototype/images/nivoslider/_img2.jpg" alt="" title="Enjoy Our Beautiful City" />
            <img src="/CoVPrototype/images/nivoslider/_img3.jpg" alt="" title="This is an example of a caption" />
            <img src="/CoVPrototype/images/nivoslider/_img4.jpg" alt="" title="This is Our Home" />
            <img src="/CoVPrototype/images/nivoslider/_img5.jpg" alt="" title="Mild Tempuratures and Natural Beauty" />
        </div>
    </div>

最后,这是 javascript 的链接:

<script src="/CoVPrototype/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

我花了半天时间才解决这个问题!希望这个强大的列表可以发现问题!

我想我也会添加CSS,以防万一这可能是罪魁祸首:

#slider_wrapper {
    margin:0 auto;
    width:740px;
    height:360px;
}
#slider {
    width:738px; /* Change this to your images width */
    height:360px; /* Change this to your images height */
    background:url(/CoVPrototype/images/nivoslider/loading.gif) no-repeat 50% 50%;
    overflow:hidden;
    margin-top:25px;
    left:-96px;
    /*--Top right rounded corner--*/
    -moz-border-radius-topright: 5px;
    -khtml-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    /*--Top left rounded corner--*/
    -moz-border-radius-topleft: 5px;
    -khtml-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:block;
}
/* The slices in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
    /*--Top right rounded corner--*/
    -moz-border-radius-topright: 5px;
    -khtml-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    /*--Top left rounded corner--*/
    -moz-border-radius-topleft: 5px;
    -khtml-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#F1F0EB;
    color:#5D79A1;
    filter: alpha(opacity=90);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
    height:32px;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.nivo-caption p {
    padding:8px 5px 5px 11px;
    margin:0;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:1.1em;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}

我在 NivoSlider 和 IE7 上遇到了同样的问题,结果发现这是“pauseTime”属性的问题。

将其移至 jQuery 函数的末尾并删除逗号。完成此操作后,滑块在 IE7 中工作正常。

原来的:

pauseTime: 4500, // How long each slide will show
pauseOnHover: true, // Stop animation while hovering

Edited

pauseOnHover: true, // Stop animation while hovering
pauseTime: 4500 // How long each slide will show

See the 支持论坛供 Dev7Studios 阅读更多内容。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nivo 滑块不适用于 IE7 的相关文章

  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人
  • 如何在文本区域中使用除“文本插入符号”之外的透明字体?

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动
  • 从 MVC 中的 FormCollection 获取选定的下拉列表值

    我有一个使用 MVC 发布到操作的表单 我想从操作中的 FormCollection 中提取选定的下拉列表项 我该怎么做 我的 HTML 表单
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • 在 HTML5 中创建可拖动和可缩放的网格

    与其他 HTML5 不同如何创建网格问题 我想知道如何制作一个可拖动且可扩展的 绘制网格非常简单 var c document getElementById canvas var ctx c getContext 2d var width
  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐