<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
/*scroll对象部分样式开始*/
/*块1样式*/
#scroll {width:760px;height:250px;overflow:hidden;position:relative;z-index:2;}
/*块2样式*/
.mqdemoa {width:4590px!important;width:2295px;list-style:none;margin:0;padding:0;overflow:hidden;}
/*块2子元素样式*/
.mqdemoa li {width:255px;float:left;}
/*内容样式*/
.mqdemoa li p {margin:0;}
.mqdemoa li p img {width:250px;height:225px;}
.mqdemoa li h3 {margin:0;font:12px/27px "宋体";text-align:center;}
/*scroll对象部分样式结束*/
/*其他样式，与scroll对象无关联*/
#prenext {width:760px;height:20px;overflow:hidden;}
#prenext span {display:block;font:12px "宋体";width:50%;height:20px;line-height:20px;text-align:center;cursor:pointer;color:#fff;background:#000;filter:alpha(opacity=30);opacity:0.3;}
#prenext .pre {float:left;}
#prenext .next {float:right;}
</style>
<script type="text/javascript">
function dhscroll(){
//author:dh20156
var dh = this;
this.autoid = null;
//块1
this.scrollDOM = null;
//块2
this.scrollCDOM = null;
//展示宽度（和块1宽度一致）
this.showwidth = 0;
//每次滚动长度
this.steplength = 51;
var oldlength = this.steplength;
//滚动时间间隔
this.steptime = 1;
//停顿时间
this.resttime = 3000;
//滚动长度
this.uvwidth = 0;
//无缝设置过程
this.getsw = function(){
var tempw = this.scrollCDOM.offsetWidth;
var temps = this.scrollCDOM.innerHTML;
this.scrollCDOM.innerHTML = [temps,temps].join("");
this.scrollCDOM.style.width = tempw*2+"px";
if(document.attachEvent){
this.scrollDOM.attachEvent("onmouseover",dh.pause);
this.scrollDOM.attachEvent("onmouseout",dh.goon);
}else{
this.scrollDOM.addEventListener("mouseover",dh.pause,true);
this.scrollDOM.addEventListener("mouseout",dh.goon,true);
}
this.uvwidth = Math.ceil(this.scrollDOM.scrollWidth / 2);
}
//从右到左
this.scrollleft = function(){
if(this.autoid!=null){
window.clearTimeout(this.autoid);
}
var uvleft = this.scrollDOM.scrollLeft;
uvleft += this.steplength;
this.scrollDOM.scrollLeft = uvleft;
if(uvleft>=this.uvwidth){
this.scrollDOM.scrollLeft = 0;
}
if(uvleft % this.showwidth == 0){
this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.resttime);
}else{
this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.steptime);
}
document.getElementById("s").innerHTML = this.uvwidth+","+uvleft;
}
//从左到右
this.scrollright = function(){
if(this.autoid!=null){
window.clearTimeout(this.autoid);
}
var uvleft = this.scrollDOM.scrollLeft;
uvleft -= this.steplength;
this.scrollDOM.scrollLeft = uvleft;
if(uvleft <= 0){
this.scrollDOM.scrollLeft = this.uvwidth;
}
if(uvleft % this.showwidth == 0){
this.autoid = window.setTimeout(function(){dh.scrollright()},dh.resttime);
}else{
this.autoid = window.setTimeout(function(){dh.scrollright()},dh.steptime);
}
document.getElementById("s").innerHTML = this.uvwidth+","+uvleft;
}
//开始滚动，参数为方向，首屏是否停顿
this.go = function(direction,rest){
if(this.autoid!=null){
window.clearTimeout(this.autoid);
}
if(direction=="left"){
if(rest){
this.autoid = window.setTimeout(function(){dh.scrollleft()},5000);
}else{
dh.scrollleft();
}
}else{
if(rest){
this.autoid = window.setTimeout(function(){dh.scrollright()},5000);
}else{
dh.scrollright();
}
}
}
//往右
this.pre = function(){
this.scrollright();
}
//往左
this.next = function(){
this.scrollleft();
}
//暂停
this.pause = function(){
dh.oldlength = dh.steplength;
dh.steplength = 0;
}
//继续
this.goon = function(){
dh.steplength = dh.oldlength;
}
}
</script>
<p id="s">scrollWidth, scrollLeft</p>
<div id="scroll">
<ul id="scroll2" class="mqdemoa">
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_8/2004681851375824_flower2.jpg" alt="test 1" /></p>
<h3>test 1</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_8/2004681851171970_flower.jpg" alt="test 2" /></p>
<h3>test 2</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_25/20046252328525988_6.jpg" alt="test 3" /></p>
<h3>test 3</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_25/20046252329143243_1.jpg" alt="test 4" /></p>
<h3>test 4</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_25/20046252329338460_2.jpg" alt="test 5" /></p>
<h3>test 5</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_25/20046252330342377_5.jpg" alt="test 6" /></p>
<h3>test 6</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_25/20046252330122343_4.jpg" alt="test 7" /></p>
<h3>test 7</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_26/BK-004.JPG" alt="test 8" /></p>
<h3>test 8</h3>
</li>
<li><p><img src="http://www.51windows.net/51wfolder_1/2004_6_26/BK-009.JPG" alt="test 9" /></p>
<h3>test 9</h3>
</li>
</ul>
</div>
<div id="prenext">
<span class="pre" onMouseOver="this.style.background='#eee';this.style.color='#000'" onMouseOut="this.style.background='#000';this.style.color='#fff'" onClick="dhs.pre();">上一页</span>
<span class="next" onMouseOver="this.style.background='#eee';this.style.color='#000'" onMouseOut="this.style.background='#000';this.style.color='#fff'" onClick="dhs.next();">下一页</span>
</div>
<script type="text/javascript">
var dhs = new dhscroll();
dhs.scrollDOM = document.getElementById("scroll");
dhs.scrollCDOM = document.getElementById("scroll2");
dhs.showwidth = 765;
dhs.getsw();
dhs.go("left",true);
</script>
<dl>
<dt><h1>dhScroll Ver2.0.0 左右横向无缝滚动</h1></dt>
<dd>支持从左到右，从右到左两个方向的无缝滚动；</dd>
<dd>支持手动更改滚动方向；</dd>
<dd>支持连续/停顿方式滚动；</dd>
<dd>鼠标指向暂停滚动，移开继续；</dd>
<dt><h1>滚动对象模型</h1></dt>
<dd><块1><块2><块2的子元素>内容</块2的子元素></块2></块1></dd>
<dt><h1>滚动模型设置样式要点</h1></dt>
<dd>块1设置的宽度为展示宽度；overflow:hidden;</dd>
<dd>块2设置的宽度为块2子元素累计宽度（确保块2所有子元素排在一排）；</dd>
<dd>由于脚本中无缝部分采用innerHTML重写块2子元素，导致IE和FF在样式渲染上有所区别，FF下块2的宽度应设置为块2宽度的两倍；</dd>
<dd>块2子元素必须确保排在一排，非表格的话最好float:left;</dd>
</dl>
