0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style>
body, div, p, ul, li {margin: 0px;padding: 0px;}
div.jp-title{
        position:relative;
        height:24px;
        display:block;
        overflow:hidden;
        border:#CCCCCC 1px solid;
    }

      .scrollingtext1{
        position:absolute;
        white-space:nowrap;
        font-family:'Trebuchet MS',Arial;
        font-size:18px;
        font-weight:bold;
        color:#000000;

    }

     .scrollingtext2, .scrollingtext3{
        position:absolute;
        white-space:nowrap;
        font-family:'Trebuchet MS',Arial;
        font-size:18px;
        font-weight:bold;
        color:#000000;
        visibility:hidden;
    }


​​
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
    $( "#clickme" ).click(function() {

        var ob = $('.scrollingtext1');
        var tw = ob.width();
        var ww = ob.parent().width();console.log(tw);
        ob.css({ left: -tw });

        ob.animate({ left: ww}, 20000, 'linear', function() {
            $('.scrollingtext2').css('visibility' ,'visible');
        });  


    });

});
</script>
</head>
<body>
<div class="jp-title">    
    <ul>
    <li class="scrollingtext1">
        scrolling text1: scrolling text1 scrolling text1 scrolling text1 scrolling text1 </li>
    </ul>
     <li class="scrollingtext2">
        scrolling text2: scrolling text2 scrolling text2 scrolling text2 scrolling text2</li>
    </ul>
     <li class="scrollingtext3">
        scrolling text3: scrolling text3 scrolling text3 scrolling text3 scrolling text3</li>
    </ul>
</div>
<div id="clickme">
Click here
</div>
</body>
</html>

質問：

この機能を作りたい: 最初にのみscrollingtext1表示され、最初に をクリックClick hereするscrollingtext1と右に移動し、2scrollingtext2回目に をクリックすると右に移動し、3 回目に表示されます。をクリックすると、右にシフトして表示され、ループが続きます。Click herescrollingtext2scrollingtext3Click herescrollingtext3scrollingtext1

上記は私の現在のコードであり、ここで立ち往生しました。誰でもこれで私を助けることができますか？ありがとう。

4

1 に答える 1

0

どうぞ。

フィドル

$('.scrollingtext2,.scrollingtext3').hide();

$("#clickme").click(function () {
    var ob = $('li:visible');
    var tw = ob.width();
    var ww = ob.parent().width();
    ob.css({
        left: -tw
    });

    ob.animate({
        left: ww
    }, 2000, 'linear', function () {
        if (!ob.is(':last-child')) {
            ob.next('li').show().css('left', -tw);
            ob.hide();
        } else {
            ob.parent().find('li:first').show().css('left', -tw);
            ob.hide()
        }
    });
});

また

$('.scrollingtext2,.scrollingtext3').hide();

$("#clickme").click(function () {
    var ob = $('li:visible');
    var tw = ob.width();
    var ww = ob.parent().width();
    ob.css({
        left: -tw
    });

    ob.animate({
        left: ww
    }, 2000, 'linear', function () {
        if (!ob.is(':last-child')) {
            ob.next('li').show().css('left', 0);
            ob.hide();
        } else {
            ob.parent().find('li:first').show().css('left', 0);
            ob.hide()
        }
    });
});

もう一度クリックする前に次の行を表示したい場合

あなたのhtmlにも構文エラーがあったので、次のように変更してください

<div class="jp-title">
    <ul>
        <li class="scrollingtext1">scrolling text1: scrolling text1 scrolling text1 scrolling text1 scrolling text1</li>
        <li class="scrollingtext2">scrolling text2: scrolling text2 scrolling text2 scrolling text2 scrolling text2</li>
        <li class="scrollingtext3">scrolling text3: scrolling text3 scrolling text3 scrolling text3 scrolling text3</li>
    </ul>
</div>
<div id="clickme">Click here</div>

visibility: hiddencss から を削除してli、jQuery のセレクターを使用して、目に見えない s と見える s を区別できるようにします。

.scrollingtext2, .scrollingtext3 {
    position:absolute;
    white-space:nowrap;
    font-family:'Trebuchet MS', Arial;
    font-size:18px;
    font-weight:bold;
    color:#000000;
}
于 2013-09-07T04:46:54.087 に答える