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

JavaScript017

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

根据你的具体情况，有两种思路。

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

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

思路就是这样，说起来麻烦，其实很简单、

<script type="text/javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

demo的css一定要设定width和overflow:hidden

<div id="demo">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div id="demo1">

<table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

文字放这里

</td>

</tr>

</table>

</div>

</td>

<td>

<div id="demo2"></div>

</td>

</tr>

</table>

</div>

原理demo2复制demo1然后连成一行，demo1滚动完滚动demo2因为内容一样所以看不出来，demo2滚动完滚动demo1