左右滚动问题 刚才给LZ发的代码没有兼容..只是IE ONLY石头君的这个是套了两层的.假如说内层是你的那个UL它的宽度是可预料的(就是说固定的)所有LI的总长度.然后外层有DIV.那个DIV设置hidden就可以了... 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style type="text/css">.div {width:800px;overflow:hidden;}.a {width:1020px;list-style:none;margin:0;padding:0;}.a li{width:255px;float:left;}</style><div class="div"><ul class="a"> <li>测试的似的的似的</li> <li>测试的似的的似的</li> <li>测试的似的的似的</li> <li>测试的似的的似的</li></ul></div>就是这个意思..回家啃饭..北. <!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><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-3422792-1";urchinTracker();</script>这是他的源码你再把相关得JS下载下来还就OK了http://www.google-analytics.com/urchin.js 把石兄的自动滚动的setTimeout去掉就好了,下面是更改过的js,其他没动//从右到左 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; } 呵呵,不需要自动滚动的?那就如楼上说的吧setTimeout这个去掉就可以了 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen JQuery如何延迟页面刷新 chrome浏览器对embed标签不感冒 如何实现在IE内一张尺寸超过IE窗口的图片,鼠标在图上可以拖动图片查看,相当于IE滚动条功能。 请教弹出层的问题 JavaScript中格式化字符串如何实现? 给一组input添加onmouseover属性时出现的问题。 红色大叉的MSGBOX [帮忙看看代码哪里出错]如何同时提交多个表单,并且要保证提交顺序 基于scorm的LMS管理系统 浏览器的兼容性问题疑惑,100分大家进来看看 js问题 看代码
<style type="text/css">
.div {width:800px;overflow:hidden;}
.a {width:1020px;list-style:none;margin:0;padding:0;}
.a li{width:255px;float:left;}
</style>
<div class="div">
<ul class="a">
<li>测试的似的的似的</li>
<li>测试的似的的似的</li>
<li>测试的似的的似的</li>
<li>测试的似的的似的</li>
</ul>
</div>
就是这个意思..
回家啃饭..北.
<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>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3422792-1";
urchinTracker();
</script>这是他的源码
你再把相关得JS下载下来还就OK了
http://www.google-analytics.com/urchin.js
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;
}
呵呵,不需要自动滚动的?那就如楼上说的吧setTimeout这个去掉就可以了