如何在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);
}
答案 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)
只需使用标题属性:
<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;
答案 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>