Question

好的，所以我修改了标记/代码，以便更容易理解。使用JavaScript我想知道如何创建一个文本滑块，用于在点击时“hwards5”或“向后”更改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>

Answer 1

在处理这样的多个元素时，我发现单独使用CSS是不够的（尽管它很适合修改简单的悬停状态或其他）。这里的一个方法非常简单，特定于这一组标记（因此可以根据需要进行修改）。更重要的是 - 它用于说明如何设置一个简单的javascript＆＃34; class＆＃34;处理你的逻辑。

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来处理事件绑定和动画，但是，再次 - 有很多选项（包括vanilla javascript和CSS3过渡的组合）。

我还要注意这都是html4和css2（保存你的doctype）。

希望有帮助 -

如何制作一个在javascript中下一个或上一个移动的文本滑块？

1 个答案: