JS点击左右键滚动中间内容怎么做呢。找了好多案例都不好改

Posted 2023-05-09

根据你的具体情况，有两种思路。
第一种，类似于滑动效果，用强父元素，overflow:hidden了。然后通过点击左右的键，获取当前父元素的宽度，修改父元素css属性的left，注意，position:absolute时left才起作用。

第二种就比较简单。就是简单的隐藏，点击左右，隐藏第一屏的信息，再次点击，隐藏第一、第二屏的信息，依次类推，当最后一屏的时候，又开始显示第一屏的信息，这样就是循环了。可以用fadeIn()等方法来加入一些效果

思路就是这样，说起来麻烦，其实很简单、 参考技术A 是轮播图吗-。- 还是仿鼠标滚轮。。。。

原生js修改文本内容

关于修改文本的内容，有好多不同的写法，今天实现一个简单的的案例就是点击“编辑”按钮，文本内容可以保存。看下图：

这个例子想要实现的效果就是点击编辑，出现文本框，然后可以更改内容，关键就是在实际项目中可能会遇到有多行这样的内容，那么现在就只能用到传参来解决了，只要实现一个剩下的就都好说了，来看看代码：

<ul id="list">
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>编辑</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>编辑</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>编辑</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>编辑</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>编辑</i>
           <span>保存</span>
       </li>
   </ul>

布局很简单，接下来看js实现：

<script>
    window.onload=function(){
        var oUl=document.getElementById("list");
        var aLi=oUl.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
        }
        //先完成其中一个li的效果
        function fn(aLi){//传参来实现每个li的效果
            var oStxt=aLi.getElementsByTagName("strong")[0];
            var oInput=aLi.getElementsByTagName("input")[0];
            var oBj=aLi.getElementsByTagName("i")[0];
            var oBc=aLi.getElementsByTagName("span")[0];
            //初始化的情况下，所展示的内容
            oInput.style="display:none";
            oStxt.innerHTML="可以更改我的内容";

            oBj.onclick=function(){//点击编辑按钮
                oStxt.style="display:none";
                oInput.value=oStxt.innerHTML;//将input的值赋值到strong里
                oInput.style="display:block";
            };
            oBc.onclick=function(){//点击保存按钮
                oStxt.style="display:block";
                oInput.style="display:none";
                oStxt.innerHTML=oInput.value;
            }
        }
    }

</script>

这是效果图，可以更改input里的内容（可以忽略样式）

好了，今天就实现一个小的例子来联系传参，希望对大家有用！