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

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

I'm using a cycle plugin to make the images from the fade every 5 secs. I wanted to add next/prev image buttons. The first piece of js is the plugin which automates the 'slideshow' and the second bit is the js for the buttons to change images next/prev.

Answer 1

may this help you

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

just add html to your page

<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);"/>')
    });
});

Hope is help you guy.