我的网站上有一个部分,我希望它类似于内容滑块,但不是自动播放,仅用于循环浏览几个短语。我确信 jQuery 可能是实现这一目标的最佳方式,但我对 jQuery 的了解不足,无法将图像滑块调整为句子滑块。我该怎么做才能达到这个效果?
问问题
1343 次
2 回答
1
这是一个简单的文本滑块供您使用。
HTML:
<div id="textSlider">
<p>This is the first test sentence</p>
<p>This is a another test sentence</p>
<p>One more test sentence</p>
<p>The final test sentence</p>
</div>
<div id="textSlider-buttons">
<a href="#" class='prev'>Prev</a>
<a href="#" class='next'>Next</a>
</div>
JS:
$(function() {
var slides = $('#textSlider').children();
var currentSlide = 0;
// show first item
slides.eq(0).addClass('active');
// on button click
$('#textSlider-buttons').on('click', 'a', function() {
// increment or decrement slide number
$(this).attr('class') == 'prev' ? currentSlide-- : currentSlide++;
// if over number of slides, or less than zero, make adjustments
if(currentSlide >= slides.length) currentSlide = 0;
if(currentSlide < 0) currentSlide = slides.length-1;
// display current slide
slides.removeClass('active').eq(currentSlide).addClass('active');
});
});
见http://jsfiddle.net/samliew/rZBaT/6/
如果您想要动画淡入淡出,请参阅http://jsfiddle.net/samliew/rZBaT/14/
于 2013-02-28T09:41:23.373 回答
1
要实现这种内容滑动效果,您需要设置一个mask
div,它是您希望幻灯片的大小。然后在掩码 div 后面/内部是一个container
包含所有幻灯片的 - 然后您使用 jQuery 和左侧位置或负边距移动容器以创建此滑动效果。
像这样设置你的 HTML
<div id="slider_mask">
<div class="slide_container">
<div class="slide"><p>Slide One</p></div>
<div class="slide"><p>Slide Two</p></div>
<div class="slide"><p>Slide Three</p></div>
<div class="slide"><p>Slide Four</p></div>
<div class="slide"><p>Slide Five</p></div>
</div>
<div class="left_button"><</div>
<div class="right_button">></div>
</div>
你的CSS如下 - 重要的是你slider_mask
和overflow:hidden
你在div中slides
彼此float
相邻slider_container
#slider_mask {
width:300px;
height:200px;
overflow:hidden;
border:1px solid #000;
position:relative;
}
#slider_mask .slide_container {
height:200px;
position:relative;
}
#slider_mask .slide {
width:300px;
height:200px;
float:left;
text-align:center;
background-color:#f1f1f1;
}
#slider_mask .left_button {
position:absolute;
padding:5px;
left:0px;
top:90px;
}
#slider_mask .right_button {
position:absolute;
padding:5px;
right:0px;
top:90px;
}
最后是 jQuery,与@Samuel Liew 的示例类似,我们将循环遍历 中的所有元素,slide_container
但在这种情况下,我们将对 div 进行动画处理,而不仅仅是更改其内容或类。
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.length;
var slide_width = $('#slider_mask').width();
var current_slide = 0;
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);
// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {
current_slide++;
if(current_slide == total_slides){ current_slide = 0; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {
current_slide--;
if(current_slide < 0){ current_slide = total_slides-1; }
var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
});
这是一个演示此工作的 JSFiddle - http://jsfiddle.net/2s95M/20/
于 2013-02-28T10:49:27.500 回答