要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left/top）或者内部图片容器的定位（marin-left/margin-top）来实现的。这里我以前者为例（向左滚动）：
通常的实现方式是：
1) 有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；
2) 包含图片的容器（此处称为“画轴”），尺寸很大，可以容纳下要滚动图片的阵列，定位方式为“absolute”；
3) 滚动即是调整此画轴的偏移量，此处示例为left；
4) 如果图片要看上去是连续滚动（到最后一幅时接着出现第一幅）的，那么可以重复第一幅图像到阵列的最末，然后当画轴滚动到此时，重置偏移量到第一幅。
有了上述DOM结构后，就可以通过JS来控制画轴的偏移量了，如果使用动画，可以参考一些成熟的动画库，示例只提供最基本的线性动画（即匀速移动）。
HTML：
<!DOCTYPE html><html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="viewPort">
<ul class="scroll" id="scroll">
<li><img src="img/scrollImage (0).jpg"></li>
<li><img src="img/scrollImage (1).jpg"></li>
<li><img src="img/scrollImage (2).jpg"></li>
<li><img src="img/scrollImage (3).jpg"></li>
<li><img src="img/scrollImage (4).jpg"></li>
<li><img src="img/scrollImage (0).jpg"></li>
</ul>
</div>
</body>
</html>
CSS：
width: 168px;
height: 168px;
position: relative;
overflow: hidden;
border: solid 1px #666;
}
.viewPort .scroll{
width: 10000px;
height: 168px;
position: absolute;
left: 0;
list-style: none;
margin: 0;
padding: 0;
}
.viewPort .scroll li{
width: 168px;
height: 168px;
float: left;
}
JS：
var scrollLeft = 0; // 记录画轴CSS left属性的值
var index = 0; // 当前显示的画的序号
// 滚动一幅画面，调整画轴scroll的left属性值。
function scrollByOne(){
var timer = setInterval(function(){
if (scrollLeft <= -168 * index) {
clearInterval(timer);
scrollLeft = -168 * index;
// 当滚动到最后一幅画面（与第一幅相同）时，重置。
if (index == 5) {
scrollLeft = 0;
scroll.style.left = '0';
index = 0;
}
} else {
scrollLeft -= 2;
scroll.style.left = scrollLeft + 'px';
}
}, 10);
}
// 滚动，每隔3秒钟滚动一幅。
setInterval(function(){
++index;
scrollByOne();
}, 3000);
代码：
求JS 大神,教教我图片轮播、、好心求解
要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left\/top）或者内部图片容器的定位（marin-left\/margin-top）来实现的。这里我以前者为例（向左滚动）：通常的实现方式是：1) 有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；2...
简单轮播图的实现及原理讲解(js)
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。默认 li 的 class 为 quiet , 第一张默认为 active 。首先先理解该轮播图如何滚动，这里是通过控制 img_ul 的 left 值来控制显示某张图片， 为了实现“滚动”的效果，我们需要 逐渐 改变 img_ul 的 left 值，而不能直接使该值...
js图片轮播怎么让轮播界面居中?
方法:将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；轮播图分为手动轮播和自动轮播；手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片...
Jquery图片轮播循环问题,求大神指教,怎么实现循环播放?
\/\/jsvar isround = "";var i=0;$(function(){ isround = setTimeout("change()",3000); $("div[name=ban] div img:eq(0)").show().siblings().hide(); $(".num li:eq(0)").addClass("current").siblings().removeClass("current"); $(".num li").click(fun...
js如何自动切换图片js如何自动切换图片格式
试试这个图片切换有12345数字一起切换鼠标点一下数字会变换到另一张图片，不点就会自动换里面有教程和源码 js图片轮播切换图片由外向中间缩小？先给它定位用jqurey一个animate({width:0;height:0;},1000)就行了思路是这样的不明白的问我 DW怎么制作图片自动切换效果，就像淘宝那种，不要代码，简单说明...
下面的代码怎么修改,能实现图片轮播
1. 通过js控制图片的显隐来实现轮播：实现简单；通过定时器切换图片。这种方式我博客里有关键代码，可以百度以下内容查看：使用javascript,jquery实现的图片轮播功能[xyytIT]2. 通过定位方式，使图片按照从左到右，或上下的顺序排列，这种效果比较好，但是实现起来，比较麻烦；目前京东，淘宝一些大型的网站用...
求js大神指教一下,为什么轮播图总是加载不到资源
1、if语句里面应该是==号，而不是=号 2、png.src = "img\/f" + [a] + ".png";3、还有就是你的数组中的图片是从f2开始的，后面的if-else语句计算出来有问题的。我自己改了一个，代码如下：<!DOCTYPE html>var a = 0;var arr = new Array();arr[0] = "1.jpg"\/\/从1开始arr[1...
详解如何使用原生JS实现移动端web轮播图效果
图片也随之移动; 手指移动的距离少时,图片自动复原位置;手指移动的距离多时,自动切换到下一张; 手指向左或者向右移动的快时,会切换到下一张; 图片轮播是无限循环的, 我们需要采用 3 1 2 3 1的方式来实现, 即 N+2张图来实现N张图的无限循环轮播 我们通过分析现象,可以提出一个基本实现方案: 1....
如何用DW制作这种图片轮播的效果
这个是要css，结合js或者jq，才能做出来的。网络上都有现成的js代码，可以先学会css，然后自己去套用js代码就可以了。
js原生轮播图?
3、轮播图的做法如下：首先就是要构架好整个轮播的盒子，以及它所需要的内容（是为了轮播切换图片的时候不会出现空白）。然后就是设置轮播盒子的大小以及里面按钮的样式。4、很好写，首先定义轮播图容器，然后定义轮播图片。js实现效果:循环轮播图首先来讲一下我的思路：我们要想无缝切换图片，必须要在所有...
