Fatal编程技术网
  • javascript/
  • 如何在javascript中制作下一个或上一个移动的文本滑块？

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

javascript html css

如何在javascript中制作下一个或上一个移动的文本滑块？,javascript,html,css,Javascript,Html,Css,好的，我已经修改了标记/代码，使其更容易理解。使用JavaScript，我想知道如何创建一个文本滑块，在html5中单击“向前”或“向后”更改段落 我只希望一次显示一个div，第一个div（div_1）需要在开始时作为默认设置可见。我还希望能够在将来添加更多的文本div。我是JavaScript新手，所以我想让它尽可能简单 我曾经尝试过用JavaScript创建它，但没有成功，我不确定我是否用正确的方法来实现它 <!DOCTYPE html> <html lang="en"&

好的，我已经修改了标记/代码，使其更容易理解。使用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>


.展示皮{
显示：无；
}
var sdivs=[document.getElementById（“div_1”），
文件getElementById（“div_2”），
文件getElementById（“div_3”），
文件.getElementById（“div_4”）]；
函数openDiv（x）{
//我需要保持div_1的开放作为起点
sdivs[0].style.display=“block”；
var j；
对于（var j=0；j
当处理像这样的多个元素时，我发现单独使用CSS是不够的（尽管它非常适合修改简单的悬停状态或任何东西）。这里的这一方法非常简单，并且特定于这一组标记（因此可以根据需要进行修改）。更重要的是，它演示了如何设置一个简单的javascript“类”来处理您的逻辑

//使用模块格式保持DOM整洁
（函数（$）{
//定义变量
var_容器；
var_模糊；
var_blurbWidth；
var_指数；
var_点击；
//初始化应用程序
函数init（）{
console.log（'init'）；
//初始化变量
_容器=$（'#text_holder.inner'）；
_blurbs=$（'.blurb'）；
_blurbWidth=$（_blurbs[0]）。innerWidth（）；
_点击次数=$（'.clicks'）；
_指数=0；
//分配处理程序并启动
样式（）；
addEventHandlers（）；
}
//初始化样式
函数样式（）{
_容器宽度（_blurbs.length*_blurbWidth）；
}
//捕捉用户交互
函数addEventHandlers（）{
_点击({
“单击”：函数（el、args）{
captureClicks（$（this.attr（'id'））；
}
});    
}
//基于点击项的迭代索引
函数captureClicks（term）{
开关（术语）{
“远期”案例：
_索引++；
如果（\u index>\u blurbs.length-1）{
_指数=0；
}
打破
案例“向后”：
_索引--；
如果（_指数<0）{
_索引=_blurbs.length-1；
}
打破
}
updateView（）；
}
//更新_containerelements left值
函数updateView（）{
//_容器动画({
//“左”：（索引*宽度）*-1
//}, 500);
_css（'left'，（（[u index*\u blurbWidth）*-1）+'px'）；
}
init（）；
})（jQuery）；
我使用jQuery来处理事件绑定和动画，但是，同样有很多选项（包括普通javascript和CSS3转换的组合）

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

希望这会有所帮助-

我可能应该提到我在这方面是一个真正的新手，我现在只对JavaScript感兴趣。我花了几个小时在网上试图找到一种方法，让我的段落在没有运气的情况下来回移动。我可能在用谷歌搜索错误的问题，谁知道呢。您在上面创建的内容很酷，但我只需要更改文本而不是幻灯片。是否可以删除此问题？我只是不想让另一个初学者在谷歌上搜索javascript答案，然后陷入另一个jQuery死胡同。你似乎在区分他们。不过，对于新手来说，使用jQuery进行事件绑定要容易一些，这就是我使用它的原因。也就是说，语法和类结构是完全相关的。如果你只是想在没有幻灯片过渡的情况下更新模糊，只需使用“CSS”而不是动画（请参阅我的更新）。（如果你不想让文本滑动，你可能不应该称之为“文本滑动条”）。你可以投票让帖子关闭，但更好的选择是澄清你的问题并专注于你真正想要实现的目标。祝你好运。那么（如何通过点击一个按钮打开不同的div？）是我最接近于找到我想要的问题/答案的地方。唯一的问题是JavaScript解决方案不能一次打开一个div。 
// 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);