Question

我已经发布了与此问题相关的帖子，我无法得到答案。我的需要是文本库连续水平滑块与下一个，前一个选项没有滑块，现在我尝试我自己的新滑块，现在我的问题是如何使下一个，我的代码之前。我的滑块代码在

之下

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

如何添加此代码的下一个和上一个？

Answer 1

我不知道这是一个答案与否，我正在添加一个解决方案。有一个符合您要求的滑块。我在我的代码中使用它，它工作正常。

Link To Slider，Demo Of Slider

初始化滑块甚至很简单。

<div id="viewport">
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
</div>
<a id="previous">Previous</a>
<a id="next">Next</a>

$(document).ready(function(){
    $('#viewport').carousel('#simplePrevious', '#simpleNext');
    $('#slider-stage').carousel('#previous', '#next');  
});

Answer 2

我正在寻找类似的东西。但我正在寻找一个无限滚动的文本。通过网络我发现了这个＆＃34;无限滚动水平文本＆＃34;一个PEN BY Chrysto。也许这有帮助吗？

http://codepen.io/bassta/pen/tEarb

HTML

<button id="ov">Overflow Visible</button> 
<button id="oh">Overflow Hidden</button>

    <div class="holder">
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

CSS

body,div,ul,li,p {
    margin:0;
    padding:0;
}

/*
    CUSTOM STYLES
*/
.holder {
    position:relative;
    top:100px;
    left:100px;
    width:200px;
    height:150px;
    background-color:red;
    overflow:visible;
}

.holder.hide-overflow {
    overflow:hidden;
}

ul.list {
    position:relative;
    display:inline-block;
    background-color:#000;
    list-style:none;
}

ul.list.cloned {
    position:absolute;
    top:0;
    left:0;
    background-color:lime!important;
}

ul.list li {
    background-color:blue;
    float:left;
    width:200px;
    height:150px;
    text-align:center;
    font-size:30px;
}

JS

var $holder = $(".holder");
var $list = $holder.find("ul.list");
var $clonedList = $list.clone();

var listWidth = $list.find("li").length * 200;
var endPos = $holder.width() - listWidth;

$list.add($clonedList).css({
    "width" : listWidth + "px"
});

$clonedList.addClass("cloned").appendTo($holder);

//TimelineMax
var infinite = new TimelineMax({repeat: -1, paused: false});
var time = 5;

infinite.fromTo($list, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 0);
infinite.fromTo($clonedList, time, {left:listWidth}, {left:0, ease: Linear.easeNone}, 0);
infinite.set($list, {left: listWidth});
infinite.to($clonedList, time, {left: -listWidth, ease: Linear.easeNone}, time);
infinite.to($list, time, {left: 0, ease: Linear.easeNone}, time);

//Pause/Play

$holder.on("mouseenter", function(){
    infinite.pause();
}).on("mouseleave", function(){
    infinite.play();
});

//Show/Hide overflow
$("#ov").on("click", function(){
    $holder.removeClass("hide-overflow");
});

$("#oh").on("click", function(){
    $holder.addClass("hide-overflow");
});

基于文本的滑块，下一个上一个带有连续水平滑块

2 个答案:

HTML

CSS

JS