如何在jquery Slider中添加标题以获得prev下一个按钮

Question

如何在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); 
} 

Answer 1

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'）。children（）。find（'div.titleslider'）。html（））;

你可以试试这个。

Answer 2

只需使用冠军属性：

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

Answer 3

只需添加标题= “上一页” 和明年的锚在你的代码。

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>