0

我对 jquery 还是很陌生，我一直在尝试将“剪辑”幻灯片打开效果添加到我拥有的静态 jquery 中。

这就是我想要的效果...

http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_142

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 100%; height: 80px; background: green; position: relative; }
</style>

  <script>
var divs = $('section div'),
    links = $('a');

links.click(function(){
    $(this.hash).toggle().siblings().hide();
});

  </script>

  <style>

  section div { 
    display: none;
    width:100%;
    height: 200px;
    background-color: lime;
}

nav a {
    padding: 10px;
    background-color: red;
    color: white;
    display: inline-block;
}
</style>

</head>
<body style="margin:0px;">

<section>
    <div id="1">
        <a href="#1" style="float:right;">X</a>
        <a href="#2">next &raquo;</a>
    </div>

    <div id="2">
        <a href="#2" style="float:right;">X</a>
        <a href="#1">&laquo; prev</a>
        <a href="#3">next &raquo;</a>
    </div>

    <div id="3">
        <a href="#3" style="float:right;">X</a>
        <a href="#2">&laquo; prev</a>
        <a href="#4">next &raquo;</a>
    </div>

    <div id="4">
        <a href="#4" style="float:right;">X</a>
        <a href="#3">&laquo; prev</a>
        <a href="#1">next &raquo;</a>
    </div>
</section>

<nav>
<a href="#1">one</a>
<a href="#2">two</a>
<a href="#3">three</a>
<a href="#4">four</a>
</nav>

</body>
</html>

你可以在这里看到它的作用：

http://jsfiddle.net/greggb/8gfEZ/1/

对此的任何帮助都会很棒，我已经尝试了很多论坛，但我无法理解如何做到这一点。

4

1 回答 1

0

我想你是在追求类似jQuery UI 幻灯片效果的东西

于 2013-02-19T17:46:14.880 回答