javascript - 带有悬停效果的 jquery 旋转木马

标签 javascript jquery css jquery-selectors carousel

这是网址:http://174.120.239.48/~peakperf/

这是 jQuery:

http://pastebin.com/fB16ahcZ

网站仍在大力开发中。

如果您将鼠标悬停在传送带上的“服务保留”上,您将看到该功能的工作原理。悬停时 span 元素淡入,鼠标移出时隐藏。有些卡住了,有些工作正常。另请注意,当您单击向右箭头并滚动轮播时,跨度会卡在“打开”位置。

如有任何帮助,我们将不胜感激,谢谢!

最佳答案

您的标记无效,因为它缺少结束“a”标记(见下文)

</a>

这是您的代码中的错误。

           <a href="#" id="homeslide6-show">
               <img src="http://174.120.239.48/~peakperf/wp-content/themes/strausberg/images/home_service_retention.jpg" width="200" height="92" />
          </li>
      </ul>

另外,通过使用 each() 函数,您的 jquery 代码可以减少大约 90%。

例如,向您的 ul 添加一个 id,然后这样做

<ul id="mycarousel">

    jQuery('#mycarousel').find('span').each(function(){

        jQuery(this).hover(function() {

            jQuery(this).next().fadeIn('slow');

            return false;

        }, function(){

            jQuery(this).next().fadeOut('slow');

            return false;
        });
    });

Ps,这段代码是固定在当前的html结构中的,你应该使用类来使其更灵活

关于javascript - 带有悬停效果的 jquery 旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5097935/

相关文章:

javascript - html5 输入元素 "date"- 如何显示日历元素

javascript - 获取稀疏 JavaScript 数组的第一个元素

javascript - 使用 jQuery 加载基于 <label> 内容的图标

javascript - CSS 或 JQuery 中的特定图像扩展选择器

javascript - 使用 jQuery 我想在 TD 悬停时突出显示表中的列

javascript - 如何检查多边形是否包含 Point Sequelize 和 postgres

javascript - 从电话号码中删除斜线

javascript - 第一次克隆后 jQuery 克隆表行

javascript - 文件输入 : Cannot read property 'toLowerCase' of undefined 的 Jquery 表单验证器错误

javascript - 移动和扩展图像以填充视口(viewport)过渡