我正在尝试使用来自http://theodin.co.uk/blog/development/advanced-jquery-slider.html
的任何滑块现在我需要在我的页面中创建多个滑块，所以我重写了html，如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Slider</title>
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 5000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "", // Start text
stopText: "", // Stop text
navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
defaultThumb: 'images/kitchens/9.jpg' //set the default thumbnail if no other are found
});
$('#anythingSlider2').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 5000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "", // Start text
stopText: "", // Stop text
navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
defaultThumb: 'images/kitchens/9.jpg' //set the default thumbnail if no other are found
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li><!--slide 1-->
<div id="textSlide">
<img class="photo" src="images/kitchens/1.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 2-->
<div id="textSlide">
<img class="photo" src="images/kitchens/2.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 3-->
<div id="textSlide">
<img class="photo" src="images/kitchens/3.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 4-->
<div id="textSlide">
<img class="photo" src="images/kitchens/4.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 5-->
<div id="textSlide">
<img class="photo" src="images/kitchens/5.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 6-->
<div id="textSlide">
<img class="photo" src="images/kitchens/6.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 7-->
<div id="textSlide">
<img class="photo" src="images/kitchens/7.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 7</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 8-->
<div id="textSlide">
<h1>Kitchen Number 8</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
<div id="anythingSlider2">
<div class="wrapper">
<ul>
<li><!--slide 1-->
<div id="textSlide">
<img class="photo" src="images/kitchens/1.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 2-->
<div id="textSlide">
<img class="photo" src="images/kitchens/2.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 3-->
<div id="textSlide">
<img class="photo" src="images/kitchens/3.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 4-->
<div id="textSlide">
<img class="photo" src="images/kitchens/4.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 5-->
<div id="textSlide">
<img class="photo" src="images/kitchens/5.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 6-->
<div id="textSlide">
<img class="photo" src="images/kitchens/6.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 7-->
<div id="textSlide">
<img class="photo" src="images/kitchens/7.jpg" alt="kitchen" width='300px' height="200px" />
<h1>Kitchen Number 7</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
<li><!--slide 8-->
<div id="textSlide">
<h1>Kitchen Number 8</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, nisi et consectetur hendrerit, dolor justo condimentum leo, vel vestibulum ligula enim non turpis.</p>
<p> Vivamus tempor dapibus lectus sit amet accumsan. Morbi eu enim diam. Cras id ornare enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus nisl.</p>
<p> rutrum at posuere ultricies, faucibus at massa. Etiam venenatis pretium varius. Nunc quam ipsum, porttitor gravida facilisis vitae, venenatis nec est. Integer in nibh a lorem varius viverra. Vestibulum nec lacus ac tellus fringilla ultricies ac ac nibh.</p>
</div>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
</div>
</body>
</html>
但是现在，应该出现的第二个滑块显示为标准的ul / li列表。有什么想法吗？
另一方面，是否可以重置或删除anythingslider的实例？基本上，我希望div在返回滑块函数调用之前回到它的状态....