我已经发布了与这个问题相关的帖子,我无法得到答案。我需要的是文本基连续水平滑块与下一个,以前的选项没有滑块,现在我尝试我自己的新滑块,现在我的问题是如何才能使下一个,以前的我的代码。我的滑块代码在下面
(function($) {
$.fn.jslider = function(options){
var config = {
speed : 1000,
pause : 2000,
transition : 'fade'
},
options = $.extend(config,options);
this.each(function(){
var $this = $(this);
$this.wrap('<div class="slider_content" />');
$this.css({
'width':'4440px',
'position':'relative',
'padding':'0'
});
if(options.transition === 'slide'){
$this.children().css({
'float' : 'left',
'list-style' : 'none'
});
$('.slider_content').css({
'width': $this.children().width(),
'overflow':'hidden'
});
slide()
}
function slide(){
setInterval(function(){
$this.animate({'left':'-'+ $this.parent().width()},options.speed,function(){
$this
.css('left',0)
.children(':first')
.appendTo($this);
})
},options.pause);
}
//Sider Function end
});
}
})(jQuery);
我的HTML是
<div class='prev'>test</div>
<div class="slider_capsule">
<ul class="slider">
<li> 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
</ul>
</div>
</div>
如何在此代码中添加next和previous?
2条答案
按热度按时间u2nhd7ah1#
我不知道这是一个答案或没有,我添加了一个解决方案,这一切。有一个滑块与您的要求。我在代码中使用了它,它工作得很好。
Link To Slider,Demo Of Slider
初始化滑块甚至很简单。
rmbxnbpk2#
我自己也在找这样的东西。但我正在寻找一个无限滚动的文本。浏览网页时,我发现了这支“无限滚动水平文本”的钢笔。也许这有帮助?
http://codepen.io/bassta/pen/tEarb
HTML
CSS
JS