Question

完成noobie尝试自学一些javascript。

基本上，在向顶部运行滑块时，我无法在页面底部运行灯箱。我从滑块开始，它完全适用于它自己。但是，当我添加代码来运行灯箱时，它不起作用，滑块停止工作。我相信我的问题是我的CSS，但我不确定。任何帮助表示赞赏。

头脑中：

<!--Main Page Stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />

<!-- Slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">  // This is the script for the banner slider
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

<!-- Lightbox Effect -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">  // This is the script for the lightbox effect
    $(document).ready(function() {
        $('#thumbnails a').lightBox();
        });
    });
</script>

我的HTML：

<div id="thumbnails">
  <ul class="clearfix">
    <li>
      <a href="images/photos/01-turntable-illustration-graphic.png"  title="Turntable">
        <img src="images/photos/01-turntable-illustration-graphic-thumbnail.png" alt="turntable">
      </a>
    </li>
    <li>
      <a href="images/photos/02-robot-diy-kit.png" title="DIY Robot Kit">
        <img src="images/photos/02-robot-diy-kit-thumbnail.png" alt="DIY Robot Kit">
      </a>
    </li>
   </ul>
 </div>

我的CSS：

/** reset lightbox position **/
#lightbox-container-image-data-box {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/** page structure **/
#w {
    display: block;
    width: 750px;
    margin: 0 auto;
    padding-top: 30px;
}

#content {
    display: block;
    width: 100%;
    background: #fff;
    padding: 25px 20px;
    padding-bottom: 35px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

#thumbnails {
    display: block;
    margin-bottom: 10px;
}
#thumbnails ul li {
    float: left;
    margin-right: 26px;
    margin-bottom: 12px;
}

Answer 1

在标题中的最后一个脚本之后添加此代码：

<script>
    $.noConflict();
<script>

这是您修改后的代码

<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />

<!-- Slider -->
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">  // This is the script for the banner slider
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

<!-- Lightbox Effect -->
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">  // This is the script for the lightbox effect
    $(document).ready(function() {
        $('#thumbnails a').lightBox();
        });
    });
</script>

<script>
    $.noConflict();
<script>

注意：这与您的问题无关，但是，您应该始终在与其相关的脚本之前添加CSS链接。

在同一页面上运行jquery滑块和灯箱的问题？

1 个答案: