JavaScript左右滚动代码

最新推荐文章于 2023-12-19 16:04:59 发布

weixin_30950237

最新推荐文章于 2023-12-19 16:04:59 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunnylost/archive/2011/11/09/2243676.html

版权

　　这样的代码网上能够找到很多，我出于学习目的自己写了一个，参考了cloudgamer的代码，滚动的原理参见参考资料。

　　我试着解释一下原理：

　　　　这里主要使用了scrollLeft属性，表示元素内容滚动到左边的距离。我们需要一个滚动元素，还需要一个父元素将滚动元素包裹起来，并且父元素的宽度要比滚动元素小，这样就会出现滚动条，当然了，这需要设置父元素的overflow属性的值为hidden，保证超出父元素宽度的滚动元素隐藏起来。

　　　　为了达到无缝滚动的效果，我们需要将滚动元素复制两份，通过不断修改父元素的scrollLeft属性达到让内容滚动的效果，当scrollLeft的值等于内容宽度的一半时(这是向左滚动的情况)，就让scrollLeft重置为0，如此不断反复。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
var $, isElement, e= {};

            $ =function(id) {
returntypeof id ==='string'? document.getElementById(id) : id;
            };

            isElement =function(o) {
return!!(o && o.nodeType ==1);
            };

            (function() {
if(window.event) {
                    e.addEvent =function(target, eventName, handler) {
                        target.attachEvent('on'+ eventName, handler);
                    }
                    e.removeEvent =function(target, eventName, handler) {
                        target.deattachEvent('on'+ eventName, handler);
                    }
                    e.getTarget =function() {
return window.event.srcElement;
                    }
                } else {
                    e.addEvent =function(target, eventName, handler) {
                        target.addEventListener(eventName, handler, false);
                    }
                    e.removeEvent =function(target, eventName, handler) {
                        target.removeEventListener(eventName, handler);
                    }
                    e.getTarget =function(even) {
return even.target;
                    }
                }
            }());

var Scroll = {
                innerElem : null,  //需要滚动的对象
                outerElem : null,  //滚动元素的外层元素
                innerElemOffsetWidth : null,  //滚动元素的宽度，因为是固定值，所以只要在初始化时计算一次即可
                speed : 5, //滚动速度，默认5个像素
                interval : 100,  //间隔时间，默认50毫秒滚动一次
                pauseTime : 1000, //停顿时间
                __id : null,
                currentDirections : 'L',  //当前滚动方向
                init : function(outerElem, innerElem) {
if(isElement(innerElem) && isElement(outerElem)) {
this.innerElem = innerElem;
this.outerElem = outerElem;
this.innerElem.appendChild(this.innerElem.cloneNode(true));

this.innerElemOffsetWidth =this.innerElem.offsetWidth;

var self =this;
                        e.addEvent(this.innerElem, 'mouseover', function() {
                            self.stop();
                        });
                        e.addEvent(this.innerElem, 'mouseout', function() {
                            self.begin();
                        });
                    }

this.scroll();
                },
                begin : function() {
this.scroll();
                },
                stop : function() {
                    clearInterval(this.__id);
                },
                scroll : function() {
var self =this, 
                        time = self.interval,
                        obj = self.outerElem;

switch(self.currentDirections) {
case'L':
if(obj.scrollLeft == self.innerElemOffsetWidth /2) {
                            obj.scrollLeft =0;
                            time = self.pauseTime;
                        } else {
                            obj.scrollLeft += self.speed;
                        }
break;
case'R':
if(obj.scrollLeft ==0) {
                            obj.scrollLeft = self.innerElemOffsetWidth /2;
                            time = self.pauseTime;
                        } else {
                            obj.scrollLeft -= self.speed;
                        }
break;
                    }                
                    self.__id = setTimeout(function() {
                        self.scroll();
                    }, time);
                },
                turnLeft : function() {
this.currentDirections ='L';
                },
                turnRight : function() {
this.currentDirections ='R';
                }
            }

            e.addEvent(window, 'load', function() {
                Scroll.init($('idScroller'), $('wrap')); 
                e.addEvent($('toLeft'), 'click', function(even) {
                    Scroll.turnLeft();
                });

                e.addEvent($('toRight'), 'click', function(even) {
                    Scroll.turnRight();
                });
            })
</script>
</head>
<body>
<div id="idScroller" style="width:290px; overflow:hidden">
<div style="width:2000px">
<div id="wrap" style="float:left;">
<div style="float:left"> <img src="1.png" width="150px" height="150px;"/> </div>
<div style="float:left"> <img src="2.png" width="150px" height="150px;"/> </div>
</div>
</div>
</div>
<input type="button" id="toLeft" value="向左"/>
<input type="button" id="toRight" value="向右"/>
</body>
</html>

　　参考资料：

　　　　js"无缝"滚动原理(解决IE与"火狐"的差异）

　　　　Javascript无缝左右滚动

转载于:https://www.cnblogs.com/sunnylost/archive/2011/11/09/2243676.html

weixin_30950237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript左右滚动代码

　　这样的代码网上能够找到很多，我出于学习目的自己写了一个，参考了cloudgamer的代码，滚动的原理参见参考资料。　　我试着解释一下原理：　　　　这里主要使用了scrollLeft属性，表示元素内容滚动到左边的距离。我们需要一个滚动元素，还需要一个父元素将滚动元素包裹起来，并且父元素的宽度要比滚动元素小，这样就会出现滚动条，当然了，这需要设置父元素的overflow属性的值为hidde...
复制链接

扫一扫