如何添加下一个和上一个按钮图像galary

Question

我知道这个问题已被问及我在这里搜索和搜索，但a）我似乎无法弄清楚如何适应我找到和b ）我还有一个小问题，试图将下一个和上一个按钮添加到我的gallery-ish布局中。

这里是链接到我的网页：

http://mymediaculture.com/_broadway_branding/index2.html

的第二个问题是，我使用的是纯CSS淡入/出过渡效果，为我的图片，但我不能找到一种方法在网页加载时显示图库的第一张图片。

正如你所看到的，我已经有了下一个/上一个链接。只是不够了解js/jquery使它们工作。

任何帮助将是很大的，不胜感激

Answer 1

HTML

<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> 

的JavaScript

window.onload= recent_pic; 
window.onload= toogle; 

var mypix=new Array("images/recent/recent1.jpg","images/recent/recent2.jpg","images/recent/recent3.jpg","images/recent/recent4.jpg","images/recent/recent5.jpg"); 

var thispic = 0; 

function recent_pic(){ 
    document.getElementById("prevlink").onclick=processprev; 
    document.getElementById("nextlink").onclick=processnext; 

     document.getElementById(1).onclick = one; 
     document.getElementById(2).onclick = tow; 
     document.getElementById(3).onclick = three; 
     document.getElementById(4).onclick = four; 
     document.getElementById(5).onclick = five; 

} 

/******************for arrow ****************/ 
function processprev(){ 
    if(thispic==0){ 
     thispic=mypix.length; 
    } 
    thispic--; 
    document.getElementById("mypicture").src= mypix[thispic]; 
    return false; 
} 

function processnext(){ 
    thispic++; 
    if(thispic==mypix.length){ 
     thispic=0; 
    } 
    document.getElementById("mypicture").src= mypix[thispic]; 
    return false; 
} 

/******************for arrow end****************/ 

Answer 2

我已经做了完整的垃圾箱的图像幻灯片放映使用jQuery Previous和Next按钮。我认为这个演示应该对你有所帮助，所以演示链接如下。

演示：http://codebins.com/bin/4ldqp8x

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> 

CSS：

.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; 
} 

的jQuery：

$(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); 

    } 

} 

演示：http://codebins.com/bin/4ldqp8x