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

JavaScript030

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

这是JS

<script type="text/javascript">

               

                   $(function(){

                    var speed = 30

                    var topscroll = document.getElementById("divkuaixunxinxi")

                    var scrolla = document.getElementById("topscrolla")

                    var scrollb = document.getElementById("topscrollb")

                    var scroll  = document.getElementById("scroll")

                    var isIE6_7 = false

                    if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style || $.browser.msie&&($.browser.version == "7.0")){

                        scroll.style.width="1600px"

                        isIE6_7 = true

                    }else{

                        scroll.style.width=(scrolla.offsetWidth*2-50)+"px"

                    }

                    

                        scrollb.innerHTML = scrolla.innerHTML

                        function Marquee() {

                            if (scrollb.offsetWidth -  topscroll.scrollLeft <=0)

                                topscroll.scrollLeft -= scrolla.offsetWidth

                            else {

                                topscroll.scrollLeft++

                                if(isIE6_7 && topscroll.scrollLeft > 1718){

                                topscroll.scrollLeft -= scrolla.offsetWidth

                                }

                            }

                        }

                        var mar = setInterval(Marquee, speed)

                        topscroll.onmouseover = function() { clearInterval(mar) }

                        topscroll.onmouseout = function() { mar = setInterval(Marquee, speed) }

                  })

        </script>

        这是HTML

        <div id="divkuaixunxinxi" class="kuaixunxinxi">

                <div id="scroll">

                    <div id="topscrolla">

                                   ·<a>平价私享天堂假期3日梦幻爱昵岛</a>平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛&nbsp&nbsp·平价私享天堂假期3日梦幻爱昵岛 

                    </div>

                    <div id="topscrollb">

                    </div>

                </div>

            </div>