[英]Jquery image gallery next/prev image buttons
<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的第一部分是自動播放“幻燈片”的插件,第二部分是用於按鈕更改下一張/上一張圖像的js。
這可能對你有所幫助
<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>
// 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);"/>')
});
});
希望能幫助你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.