js多张图片自右向左滚动

js多张图片自右向左滚动

只需设置容器宽度和滚动盒子宽度即可,滚动元素设置id=marquee2

<script type="text/javascript">var AutoScroll_cont = function (a, b, c, d) {this.frameId = a;this.frameWidth = b; //滚动框宽度this.speed = c; //移动速度(单位毫秒，越小越快)this.space = d; //每次移动像素(单位px，越大越快)this._timeoutObj = null;}AutoScroll_cont.prototype = {$: function (id) {return document.getElementById(id)},begin: function () {if (!this.$(this.frameId)) {return};this.$(this.frameId).style.overflow = "hidden";this.$(this.frameId).style.width = this.frameWidth + "px";this._bigDiv = document.createElement("div");this._bigDiv.style.zoom = 1;this._bigDiv.style.overflow = "hidden";this._bigDiv.style.width = "32765px";this.div1 = document.createElement("div");this.div2 = document.createElement("div");this.div1.style.cssFloat = this.div1.style.styleFloat = this.div2.style.cssFloat = this.div2.style.styleFloat = "left";tempHTML = this.$(this.frameId).innerHTML;this.$(this.frameId).innerHTML = "";this.$(this.frameId).appendChild(this._bigDiv);this._bigDiv.appendChild(this.div1);this._bigDiv.appendChild(this.div2);this.div1.innerHTML = this.div2.innerHTML = tempHTML;var tempThis = this;this.$(this.frameId).onmouseover = function () {tempThis.stop()};this.$(this.frameId).onmouseout = function () {tempThis.play()};this.play();},play: function () {var tempThis = this;clearInterval(this._timeoutObj);this._timeoutObj = setInterval(function () {tempThis.scrollNext()}, this.speed);},stop: function () {clearInterval(this._timeoutObj);},scrollNext: function () {try {this.$(this.frameId).scrollLeft += this.space;} catch (e) {this.stop();return;};if (this.$(this.frameId).scrollLeft > this.div1.scrollWidth) {this.$(this.frameId).scrollLeft = this.$(this.frameId).scrollLeft - this.div1.scrollWidth;};}};var a = new AutoScroll_cont('marquee2', 350, 30, 1);a.begin();
</script>

效果图: