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的第一部分是自动播放“幻灯片”的插件，第二部分是用于按钮更改下一张/上一张图像的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);"/>')
    });
});

希望能帮助你。

Jquery图像库下一个/ prev图像按钮

2 个答案: