jQuery滑块想要向我的滑块添加箭头

时间:2015-09-18 05:19:59

标签: jquery css slider

这是我的jQuery滑块代码,我想在滑块中手动滑动时添加右箭头和左箭头我该怎么办?
如果可能,请给我示例或代码。谢谢



	 $(window).load(function() {

	   var i = 0;

	   var images = ['../images/mainbanner.jpg', '../images/index.jpg'];

	   var image = $('#sliderit');

	   //Initial Background image setup

	   image.css('background-image', 'url(../images/mainbanner.jpg)');

	   //Change image at regular intervals

	   setInterval(function() {

	     image.fadeOut(1000, function() {

	       image.css('background-image', 'url(' + images[i++] + ')');

	       image.fadeIn(1000);

	     });

	     if (i == images.length)
	       i = 0;

	   }, 3000);

	 });
	 `




1 个答案:

答案 0 :(得分:0)

您可以查看以下链接。

Fiddle

 $(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });




});

您也可以使用简单的一个。请查看此Fiddle