使用js实现循环轮播效果图

js实现循环轮播图效果的思路如下：

使用一个div包含轮播图的显示部分，超出部分隐藏即可，而设置循环定时器通过调整轮播内容的外边距来使得图片产生移动效果，同时需要在最后加上第一张图片以实现无缝衔接。

纵向滚动的具体代码实现如下：

html代码：

</div>

css代码：

.container{

width:400px;

height:300px;

border:1px solid red;

overflow:hidden;

}

js代码:

window.onload=function(){

var offset=0;

var marquue = document.getElementById('marquue');

var height=marquue.offsetHeight; //获取marquue的高度用以判断循环结束

//在marquue末尾添加第一个子节点的复制，用于在显示最后一张图片的时候补上空白的地方

marquue.appendChild(marquue.children[0].cloneNode(true)); //true表示递归复制

//设置定时器

setInterval(function(){

if(offset==height){ //到达了底部

offset=0;

}

marquue.marginTop = -1*offset+"px";

offset+=1;

},10);

}

以上代码就可以实现一个纵向的轮播滚动图，效果如下：

当然，横向滚动效果的实现与之类似，唯一需要注意的地方是marquue需要手动设置足够的宽度来让图片横向显示，否则，marquue的div会根据父级div自动缩小宽度从而使得图片只能纵向的排列。

效果如下图：

也可以使用这种思路实现鼠标悬浮的时候滚动暂停的效果，具体做法是将interval中的动作封装成一个全局函数，在页面加载时调用，然后设置鼠标进入事件是清除定时器，鼠标移开事件是重新设置定时器。

*还有一种图片轮播效果是当滚动到一张图片时，暂停几秒，再继续滚动到下一张图片。这种效果实现需要在定时器函数中添加一个是否转动到整张图片的判断，当判断到滚动到了整张图片时，清楚定时器，然后设置几秒后执行再次设置定时器函数。