Javascript 如何将“下一步”和“上一步”按钮添加到图像galary

我知道有人问了这个问题，我在这里搜索了又搜索，但a）我似乎不知道如何调整我找到的内容，b）我还有一个小问题要解决，那就是试图将下一个和上一个按钮添加到我的图库布局中

以下是指向我的页面的链接：

第二个问题是，我正在为我的图像使用纯css fadein/out过渡效果，但我找不到一种方法在页面加载时显示库中的第一幅图像

如你所见，我已经准备好了下一个/上一个链接。只是对js/jquery了解不够，无法让它们正常工作

任何帮助都将不胜感激

 <div id="top_mid_mid">
    <a rel="nofollow" target="_blank" href="#">
        <img id="mypicture" border="0" alt="portfolio" src="images/recent/recent1.jpg" />
    </a>
    <div id="prev"><a class="current" href="#"  title="portfolio"><img  alt="prev" src="images/prev.gif" id="prevlink" /></a></div>
        <div id="next"><a class="current" href="#"   title="portfolio"><img  alt="next" src="images/next.gif" id="nextlink" /></a></div>

</div>

---

我已经使用jQuery完成了图像幻灯片放映的完整存储箱，包括上一个和下一个按钮。我认为这个演示应该对你有帮助，所以演示链接如下

演示：

HTML:

<div class="topbar">
  <ul id="navigation">
    <li id="previous">
      <a href="#tag">
        Previous
      </a>
    </li>
    <li class="active">
      <a href="#">
        1
      </a>
    </li>
    <li>
      <a href="#">
        2
      </a>
    </li>
    <li>
      <a href="#">
        3
      </a>
    </li>
    <li>
      <a href="#">
        4
      </a>
    </li>
    <li>
      <a href="#">
        5
      </a>
    </li>
    <li>
      <a href="#">
        6
      </a>
    </li>
    <li>
      <a href="#">
        7
      </a>
    </li>
    <li>
      <a href="#">
        8
      </a>
    </li>
    <li>
      <a href="#">
        9
      </a>
    </li>
    <li>
      <a href="#">
        10
      </a>
    </li>
    <li id="next">
      <a href="#tag">
        Next
      </a>
    </li>
  </ul>
</div>
<div id="images">
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/Mathilda%C2%B4s%20Wallpaper/albums/104123/Animal%20Friends.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://marowall.ru/Jivotnie/Grizuni/Kroliki1024/8/9.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://www.mejoresmascotas.com/wp-content/uploads/2009/02/perrito.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://data.whicdn.com/images/16010691/white_lion_large.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://koprol.zenfs.com/system/mugshots/0153/9924/index.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Cute-Squirrel-s.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/adilsaadi/albums/5861552/horses.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://fundartspring2011.wikispaces.com/file/view/puppy_dogs_14.jpg/217071218/297x225/puppy_dogs_14.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://1.bp.blogspot.com/-zfT5EAh0Tz8/TbJVRf5wywI/AAAAAAAAAE4/TWWdSLhx9Io/s1600/ardilla.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/skafridi/albums/6474892/animals-pictures-birds-bluebird.jpg" width="250" height="200" />
  </div>
</div>

 .topbar{
  position:fixed;
  top:0;
  left:0;
  height:35px;
  background:none repeat scroll 0 0 #B0832E;
  border-shadow:1px 0 4px rgba(0, 0, 0, 0.4);
  font-size:12px;
  width:100%;
  z-index:9999;

}

#navigation{

  border: 1px solid red;
  list-style: none outside none;
  margin: 5px auto 0;
  text-align: center;
  width: 60%;
  z-index: 3;
}
#navigation li{
  display:inline-block;
  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
  border:1px solid white;
  color:#444444;
  font-size:12px;
  text-transform:uppercase;

}
#navigation li a{
  color:#444444;
  text-decoration:none;
  padding:2px 5px;
}
#navigation li.active a, #navigation li:hover a{
  color:#fff;
  background:#333;
  text-decoration:underline;
}
#images{
  text-align:center;
}
.slide{
  padding:5px;
  display:none;
  position:absolute;
  top:35;
  margin-left:25%;
  background:#2255a9;
}

$(function() {
    //Show Current Active Image Slide On Document Ready
    showSlide();

    $("li", $("#navigation")).click(function() {
        var activeIndex = $("li.active", $("#navigation")).index();

        if (typeof $(this).attr('id') != "undefined") {

            if ($(this).attr('id') == "previous" && activeIndex > 1) {
                //set PREV Active Image
                $("li", $("#navigation")).removeClass('active');
                $("#navigation li:eq(" + (activeIndex - 1) + ")").attr('class', 'active');

            } else if ($(this).attr('id') == "next" && activeIndex < ($("li", $("#navigation")).length - 2)) {
                //set NEXT Active Image
                $("li", $("#navigation")).removeClass('active');
                $("#navigation li:eq(" + (activeIndex + 1) + ")").attr('class', 'active');
            }
        } else {
            //set Active Image which slide no is clicked    
            $("li", $("#navigation")).removeClass('active');
            $(this).attr('class', 'active');
        }
        //Check if Different Slide has been clicked or Move then only load..
        if (activeIndex != $("li.active", $("#navigation")).index()) {
            showSlide(); //Call to show active image
        }
    });

});
//Function to Show Current Active Image Slide
function showSlide() {
    //Get Current Index of Active LI
    var i = $("li.active", $("#navigation")).index();
    //Check Range of Current Index
    if (i > 0 && i < ($("li", $("#navigation")).length - 1)) {
        //FadeOut all Images
        $(".slide", $("#images")).fadeOut(1000);
        //FadeIn Only Current Active Indexed Slided
        $(".slide:eq(" + (i - 1) + ")", $("#images")).fadeIn(3000);

    }

}

jQuery:

<div class="topbar">
  <ul id="navigation">
    <li id="previous">
      <a href="#tag">
        Previous
      </a>
    </li>
    <li class="active">
      <a href="#">
        1
      </a>
    </li>
    <li>
      <a href="#">
        2
      </a>
    </li>
    <li>
      <a href="#">
        3
      </a>
    </li>
    <li>
      <a href="#">
        4
      </a>
    </li>
    <li>
      <a href="#">
        5
      </a>
    </li>
    <li>
      <a href="#">
        6
      </a>
    </li>
    <li>
      <a href="#">
        7
      </a>
    </li>
    <li>
      <a href="#">
        8
      </a>
    </li>
    <li>
      <a href="#">
        9
      </a>
    </li>
    <li>
      <a href="#">
        10
      </a>
    </li>
    <li id="next">
      <a href="#tag">
        Next
      </a>
    </li>
  </ul>
</div>
<div id="images">
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/Mathilda%C2%B4s%20Wallpaper/albums/104123/Animal%20Friends.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://marowall.ru/Jivotnie/Grizuni/Kroliki1024/8/9.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://www.mejoresmascotas.com/wp-content/uploads/2009/02/perrito.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://data.whicdn.com/images/16010691/white_lion_large.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://koprol.zenfs.com/system/mugshots/0153/9924/index.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Cute-Squirrel-s.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/adilsaadi/albums/5861552/horses.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://fundartspring2011.wikispaces.com/file/view/puppy_dogs_14.jpg/217071218/297x225/puppy_dogs_14.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://1.bp.blogspot.com/-zfT5EAh0Tz8/TbJVRf5wywI/AAAAAAAAAE4/TWWdSLhx9Io/s1600/ardilla.jpg" width="250" height="200" />
  </div>
  <div class="slide">
    <img src="http://thumbs.myopera.com/sz/colx/skafridi/albums/6474892/animals-pictures-birds-bluebird.jpg" width="250" height="200" />
  </div>
</div>

 .topbar{
  position:fixed;
  top:0;
  left:0;
  height:35px;
  background:none repeat scroll 0 0 #B0832E;
  border-shadow:1px 0 4px rgba(0, 0, 0, 0.4);
  font-size:12px;
  width:100%;
  z-index:9999;

}

#navigation{

  border: 1px solid red;
  list-style: none outside none;
  margin: 5px auto 0;
  text-align: center;
  width: 60%;
  z-index: 3;
}
#navigation li{
  display:inline-block;
  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
  border:1px solid white;
  color:#444444;
  font-size:12px;
  text-transform:uppercase;

}
#navigation li a{
  color:#444444;
  text-decoration:none;
  padding:2px 5px;
}
#navigation li.active a, #navigation li:hover a{
  color:#fff;
  background:#333;
  text-decoration:underline;
}
#images{
  text-align:center;
}
.slide{
  padding:5px;
  display:none;
  position:absolute;
  top:35;
  margin-left:25%;
  background:#2255a9;
}

$(function() {
    //Show Current Active Image Slide On Document Ready
    showSlide();

    $("li", $("#navigation")).click(function() {
        var activeIndex = $("li.active", $("#navigation")).index();

        if (typeof $(this).attr('id') != "undefined") {

            if ($(this).attr('id') == "previous" && activeIndex > 1) {
                //set PREV Active Image
                $("li", $("#navigation")).removeClass('active');
                $("#navigation li:eq(" + (activeIndex - 1) + ")").attr('class', 'active');

            } else if ($(this).attr('id') == "next" && activeIndex < ($("li", $("#navigation")).length - 2)) {
                //set NEXT Active Image
                $("li", $("#navigation")).removeClass('active');
                $("#navigation li:eq(" + (activeIndex + 1) + ")").attr('class', 'active');
            }
        } else {
            //set Active Image which slide no is clicked    
            $("li", $("#navigation")).removeClass('active');
            $(this).attr('class', 'active');
        }
        //Check if Different Slide has been clicked or Move then only load..
        if (activeIndex != $("li.active", $("#navigation")).index()) {
            showSlide(); //Call to show active image
        }
    });

});
//Function to Show Current Active Image Slide
function showSlide() {
    //Get Current Index of Active LI
    var i = $("li.active", $("#navigation")).index();
    //Check Range of Current Index
    if (i > 0 && i < ($("li", $("#navigation")).length - 1)) {
        //FadeOut all Images
        $(".slide", $("#images")).fadeOut(1000);
        //FadeIn Only Current Active Indexed Slided
        $(".slide:eq(" + (i - 1) + ")", $("#images")).fadeIn(3000);

    }

}

$（函数（）{
//在文档准备就绪时显示当前活动图像幻灯片
幻灯片（）；
$（“li”，$（“#导航”）。单击（函数（）{
var activeIndex=$（“li.active”，$（“#导航”）.index（）；
if（typeof$（this）.attr（'id'）！=“未定义”）{
if（$（this.attr（'id'）=“previous”&&activeIndex>1）{
//设置上一个活动图像
$（“li”，“$”（“导航”））.removeClass（'active'）；
$（“#导航li:eq（“+（activeIndex-1）+”）.attr（'class'，'active'）；
}else if（$（this.attr（'id'）==“next”和&activeIndex<（$（（$），$（“#导航”））.length-2））{
//设置下一个活动图像
$（“li”，“$”（“导航”））.removeClass（'active'）；
$（“#导航li:eq（“+（activeIndex+1）+”）.attr（'class'，'active'）；
}
}否则{
//设置单击幻灯片编号的活动图像
$（“li”，“$”（“导航”））.removeClass（'active'）；
$（this.attr（'class'，'active'）；
}
//检查是否单击或移动了不同的幻灯片，然后仅加载。。
if（activeIndex！=$（$li.active，$（“#导航”））.index（））{
showSlide（）；//调用以显示活动图像
}
});
});
//用于显示当前活动图像幻灯片的函数
函数showSlide（）{
//获取活动LI的当前索引
变量i=$（“li.active”，$（“#导航”）.index（）；
//检查当前索引的范围
如果（i>0&&i<（$（（$），$（$（$））.length-1））{
//淡出所有图像
$（“.slide”，$（“#图像”）.fadeOut（1000）；
//FadeIn仅当前活动索引滑块
$（“.slide:eq（“+（i-1）+”），$（“#图像”）。fadeIn（3000）；
}
}

演示：