需要一个JS效果，图片滚动的

哪位大侠给我实现在一个JS效果，效果是这样的。一组图片，在右边有一个箭头，点击右边箭头，图片向左滚动，点一次滚动一次，到最后一个的时候，右边箭头消失，左边出一个箭头，点左... 哪位大侠给我实现在一个JS效果，效果是这样的。
一组图片，在右边有一个箭头，点击右边箭头，图片向左滚动，点一次滚动一次，到最后一个的时候，右边箭头消失，左边出一个箭头，点左边箭头图片向右边滚动，到最后一个时，左边箭头消失，右边出现，还是上面哪个效果，来回循环。
哪位大侠能实现呀，实现效果500分送上，谢谢
最好无限图片的展开

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

百度网友2571d37bb
推荐于2016-01-08 · 知道合伙人软件行家

百度网友2571d37bb
知道合伙人软件行家

采纳数：1971 获赞数：7905

前端工程师

向TA提问私信TA

关注

展开全部

<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>

本回答由电脑网络分类达人赵丽丽推荐

已赞过 已踩过<

评论收起

贰两毛尖
推荐于2016-01-09 · TA获得超过862个赞

知道小有建树答主

回答量：1102

采纳率：0%

帮助的人：879万

我也去答题访问个人页

关注

展开全部

<!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>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

需要一个JS效果，图片滚动的

其他类似问题

为你推荐：