需要一个JS效果,图片滚动的
哪位大侠给我实现在一个JS效果,效果是这样的。一组图片,在右边有一个箭头,点击右边箭头,图片向左滚动,点一次滚动一次,到最后一个的时候,右边箭头消失,左边出一个箭头,点左...
哪位大侠给我实现在一个JS效果,效果是这样的。
一组图片,在右边有一个箭头,点击右边箭头,图片向左滚动,点一次滚动一次,到最后一个的时候 ,右边箭头消失,左边出一个箭头,点左边箭头图片向右边滚动,到最后一个时,左边箭头消失,右边出现,还是上面哪个效果,来回循环。
哪位大侠能实现呀,实现效果500分送上,谢谢
最好无限图片的 展开
一组图片,在右边有一个箭头,点击右边箭头,图片向左滚动,点一次滚动一次,到最后一个的时候 ,右边箭头消失,左边出一个箭头,点左边箭头图片向右边滚动,到最后一个时,左边箭头消失,右边出现,还是上面哪个效果,来回循环。
哪位大侠能实现呀,实现效果500分送上,谢谢
最好无限图片的 展开
2个回答
展开全部
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ width:200px; height:200px; float:left; padding:5px;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var aLi=oUl.children;
//复制一份内容
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
var W=oUl.offsetWidth/2;
var left=0;
setInterval(function(){
left-=10;
oUl.style.left=left%W+'px';
},30);
};
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" width="200"></li>
<li><img src="img/2.jpg" width="200"></li>
<li><img src="img/3.jpg" width="200"></li>
<li><img src="img/4.jpg" width="200"></li>
</ul>
</div>
</body>
展开全部
<!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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询