如何在Jquery Slider中为prev下一个按钮添加标题

时间:2016-09-30 11:23:03

标签: php jquery html css slider

如何在Jquery Slider中为prev下一个按钮添加标题。 我试过小提琴

http://jsfiddle.net/J9fqq/255/

屏幕 - http://prntscr.com/co4o10

我创建了jsfiddle,所以每个人都可以看到所有内容 也许有一个类似的滑块? 请帮忙

var slideWidth=300;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,10000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(prevSlide,10000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
});

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);


}

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

3 个答案:

答案 0 :(得分:0)

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
    console.log($('.slidewrapper').children().find('div.titleslider').html());
    $('#next_slide').html($('.slidewrapper').children().find('div.titleslider').html());

}

的console.log($( 'slidewrapper ')儿童()找到(' div.titleslider')HTML());         $( '#next_slide')的HTML($( 'slidewrapper ')的儿童()找到(' div.titleslider')的HTML());

你可以这样试试。

答案 1 :(得分:0)

只需使用标题属性:

&#13;
&#13;
<a href="javascript: void(0)" id="prev_slide" title="Prev" class="arrows">←</a>
<a href="javascript: void(0)" id="next_slide" title="Next" class="arrows">→</a>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

在你的代码中添加title =“Previous”和Next for Anchors。

var slideWidth=300;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,10000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(prevSlide,10000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
});

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
    
    
}

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
.viewport{
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    margin: 0;
    padding: 0;    
}
.slide{
    width: 300px;
    height: 100px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ff0000;
}
.second{
     background: #00ff00;   
}
.third{
     background: #0000ff;   
}
<div class='viewport'>
    <ul class='slidewrapper' data-current=0>
        <li class='slide'>
            <div class="titleslider">
              Slider 1
            </div>
        </li>
        <li class='slide'>
            <div class="titleslider">
              Slider 2
            </div>
        </li>
        <li class='slide'>
            <div class="titleslider">
              Slider 3
            </div>
        </li>
    </ul>
</div>
<a href='javascript: void(0)' id='prev_slide' class='arrows' title="Previous">←</a>
<a href='javascript: void(0)' id='next_slide' class='arrows' title="Next">→</a>