【问题标题】:jQuery slider want to add arrow to my sliderjQuery滑块想向我的滑块添加箭头
【发布时间】:2015-12-15 03:40:38
【问题描述】:

这是我的 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);

	 });
	 `

【问题讨论】:

    标签: jquery css slider


    【解决方案1】:

    您可以通过以下链接查看。

    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

    【讨论】:

    • thanx 但我想要手动滑动和自动滑动。你有什么想法吗?
    • 是的,请检查新链接。
    • 感谢,但我给了自动播放超时的值??
    • 你可以添加 timeout:2,
    • 感谢帮助我从你的答案中得到了这个想法,我在我的代码上实现了,但不幸的是,它正在我的代码上工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-01
    • 1970-01-01
    相关资源
    最近更新 更多