jQuery的圖片庫下一/上一張圖片按鈕

Question

<div class="slider"> 
    <ul id="slider1"> 
     <li> 
      <img src="images/contimg.jpg" width="500" height="400" border="0"> 
     </li> 
     <li> 
      <img src="images/contimgtwo.jpg" width="500" height="334" border="0"> 
     </li> 
    </ul> 
</div> 
<div id="buttons"> 
    <button>click</button> 
</div> 

的Javascript

$(document).ready(function() { 
    $('#slider1').cycle({ 
     fx: 'fade', 
     speed: 'slow', 
     timeout: 5000 
    }); 
}); 

$(function() { 
    $("button").click(function() { 
     $("#slider1").length + 1; 
    }); 
}); 

我使用的是循環的插件從褪色使圖像每5秒。我想添加next/prev圖像按鈕。第一個js是自動執行「幻燈片放映」的插件，第二個是用於更改next/prev圖像的按鈕的js。

Answer 1

這可以幫助你

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#slider1').cycle({ 
     fx: 'fade', 
     speed: 'slow', 
     timeout: 5000 
     prev: '#prev', 
     next: '#next', 
     pager: '#nav', 
     pagerAnchorBuilder: pagerFactory 
    }); 

    function pagerFactory(idx, slide) { 
     var s = idx > 2 ? ' style="display:none"' : ''; 
     return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; 
    }; 

}); 
</script> 

只需添加HTML到您的網頁

<a href="#"><span id="prev">Prev</span></a> 
<a href="#"><span id="next">Next</span></a> 
<div id='nav'></div> 

Answer 2

// doc ready 
$(function() { 
    $('#slider').cycle({ 
     fx:  'fade', 
     speed: 'slow', 
     timeout: '5000', 
     next: '#next-arrow', // id name next 
     prev: '#prev-arrow' // id name prev 
    }); 

    $(window).load(function(
     // your div next name 
     $('#next-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px;"/>') 

     // your div prev name 
     $('#prev-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px; -webkit-transform:rotate(180deg);"/>') 
    }); 
}); 

希望是幫助你的人。