0

私はすでにこの質問に関連する投稿をしていますが、答えが得られません。私の必要性は、次の前のオプションを備えたテキストベースの連続水平スライダーです。スライダーはありません。今、私は自分の新しいスライダーを試しています。私の質問は、コードの前の次のスライダーを作成する方法です。私のスライダーコードは以下です

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

このコードに次と前を追加するにはどうすればよいですか?

4

2 に答える 2

3

それが答えかどうかはわかりませんが、すべての解決策を追加しています。あなたの要件を持つスライダーがあります。コードで使用しましたが、正常に動作します。

スライダーへのリンク、スライダーデモ

スライダーの初期化はさらに簡単です。

<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');  
});
于 2013-06-11T10:00:20.303 に答える
0

私は自分自身でそのようなものを探しています。しかし、無限にスクロールするテキストを探しています。Web を調べていると、この「無限スクロールの水平テキスト」A 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");
});
于 2016-04-26T08:58:41.217 に答える