0

我正在从教程中制作一个简单的幻灯片：http: //line25.com/tutorials/how-to-build-a-sliding-feature-slideshow-with-jquery

我得到了大部分工作，除了当我点击导航按钮时，它停留在同一个按钮上，并且屏幕下降到图像的顶部。

现场演示：http ://epicureancateringaz.com/New/new1

// JavaScript Document
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visability", "visable");
$("#slideshow-nav a[href=#photos1]").addClass("active");

$("#slideshow-nav").localScroll({
    target:'#slideshow', axis: 'x'
});

$("#slideshow-nav a").click(function(){
    $("#slideshow-nav a").removeClass("active");
    $(this).addClass("active");
});
});


//css
#slideshow{
width:1000px;
height:320px;
margin:auto;
box-shadow:0px 0px 80px #000;
-moz-box-shadow:0px 0px 80px #000;
-webkit-box-shadow:0px 0px 80px #000;
}
#slideshow ul{
width:4000px;
list-style:none;
}
#slideshow ul li{
float:left; 
}
#slideshow-nav{
width:250px;
margin:0 auto 200px auto;   
}
#slideshow-nav ul{
list-style:none;    
}
#slideshow-nav ul li{
float:left; 
}
#slideshow-nav ul li a{
display:block;
width:30px;
height:30px;
float:left;
margin:0 10px;
background-color:#fff;
border-radius:30px; 
-moz-border-radius:30px;
-webkit-border-radius:30px; 
box-shadow:0px 0px 30px #000;
-moz-box-shadow:0px 0px 30px #000;
-webkit-box-shadow:0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active{
background-color:#a89d8a;
}


//html
<div id="slideshow">
        <ul>
  <li id="photos1"><a href=""><img src="images/photos/1.jpg" alt="img 1" /></a></li>
  <li id="photos2"><a href=""><img src="images/photos/2.jpg" alt="img 2" /></a></li>
  <li id="photos3"><a href=""><img src="images/photos/3.jpg" alt="img 3" /></a></li>
  <li id="photos4"><a href=""><img src="images/photos/4.jpg" alt="img 4" /></a></li>
        </ul>
    </div>
    <div id="slideshow-nav">
        <ul>
            <li><a href="#photos1"></a></li>
            <li><a href="#photos2"></a></li>
            <li><a href="#photos3"></a></li>
            <li><a href="#photos4"></a></li>
        </ul>
    </div>
4

2 回答 2

1

我在控制台中看到错误：

Uncaught TypeError: Object [object Object] has no method 'localScroll' script.js:7

你忘了包括jQuery.LocalScroll

下载这个库，把它放到你的 js 文件夹中，然后插入到 head 标签中

<script src="js/jQuery.LocalScroll.js"></script>
于 2013-06-10T01:18:11.960 回答
0

首先是您的页面上没有 localScroll 插件。

<script src="js/jQuery.LocalScroll.js"></script>

通过教程你应该有它。

然后将 $("#slideshow-nav a") 的事件处理程序更改为

$("#slideshow-nav a").click(function(e){
    e.preventDefault();
    $("#slideshow-nav a").removeClass("active");
    $(this).addClass("active");
});

所以屏幕不会下降。

于 2013-06-10T01:44:48.147 回答