如何使一个文本滑块移动下一个或上一个在javascript

How to make a text slider that moves next or previous in javascript?

本文关键字：下一个 上一个 javascript 移动 何使一 文本      更新时间：2023-09-26

好的，所以我已经修改了标记/代码，使其更容易理解。使用JavaScript，我想知道如何创建一个文本滑块，改变一个段落在html5无论是"向前"或"向后"点击?

我只希望一次显示一个div，并且第一个div (div_1)需要作为默认设置在开始时可见。我还希望将来能够添加更多的文本div到它。我是JavaScript的新手，所以我想让它尽可能的简单。

我已经尝试过在JavaScript中创建它，但没有工作，我不确定我是否以正确的方式进行。

<!DOCTYPE html> 
<html lang="en">
    <head>
    <style type="text/css">
       .showHide {
            display: none;
            }
    </style>
    <script type="text/javascript">
            var sdivs = [document.getElementById("div_1"), 
                        document.getElementById("div_2"), 
                        document.getElementById("div_3"),
                        document.getElementById("div_4")];
        function openDiv(x) {
            //I need to keep div_1 open as a starting point
            sdivs[0].style.display ="block";
            var j;
            for (var j = 0; j < sdivs.length; j++) {
                if (j === x) {
                    continue;
                    }
                else {
                    sdivs[j].style.display = "none";
                }
            }
        }     
    </script>
<title>text</title>
</head>
<body>
    <a href="#" onlick="openDiv(1)">forward</a> 
    <a href="#" onlick="openDiv(-1)">backwards</a>     
    <div id="text_holder">
        <div id="div_1" class="showHide">One</div>
        <div id="div_2" class="showHide">Two</div>
        <div id="div_3" class="showHide">Three</div>
        <div id="div_4" class="showHide">Four</div> 
    </div>
</body>
</html>

当处理像这样的多个元素时，我发现单独使用CSS是不够的(尽管它在修改简单的悬停状态或其他方面非常出色)。这里的这个方法非常简单，并且特定于这一组标记(因此您可以根据需要进行修改)。更重要的是，它说明了如何建立一个简单的javascript"类"来处理你的逻辑。

http://jsfiddle.net/1z13qb58/

// use a module format to keep the DOM tidy
(function($){
// define vars
var _container;
var _blurbs;
var _blurbWidth;  
var _index;
var _clicks;
// initialize app
function init(){
    console.log('init');
    // initialize vars
    _container  = $('#text_holder .inner');
    _blurbs     = $('.blurb');
    _blurbWidth  = $(_blurbs[0]).innerWidth();
    _clicks     = $('.clicks');
    _index      = 0;
    // assign handlers and start
    styles();
    addEventHandlers();
}
// initialize styles
function styles(){
    _container.width(_blurbs.length * _blurbWidth);
}
// catch user interaction
function addEventHandlers(){
    _clicks.on({
        'click': function(el, args){
            captureClicks( $(this).attr('id') );
        }
    });    
}
// iterate _index based on click term
function captureClicks(term){  
    switch(term){
        case 'forwards':
            _index++;
            if(_index > _blurbs.length - 1){
                _index = 0;
            }
            break;
        case 'backwards':
            _index--;
            if(_index < 0){
                 _index = _blurbs.length - 1;   
            }
            break;
    }
    updateView();
}
// update the _container elements left value
function updateView(){
    //_container.animate({
        //'left' : (_index * _blurbWidth) * -1
    //}, 500);
    _container.css('left', ((_index * _blurbWidth) * -1) + 'px');
}
init();
})(jQuery);

我使用jQuery来处理事件绑定和动画，但是，同样-有很多选项(包括香草javascript和CSS3过渡的组合)。

我还会注意到，这都是html4和css2(保存您的doctype)。

希望有帮助-

相关文章：