javascript: 是一个伪协议，javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。 

|| 是或的意思   && 是并的意思  你这个应该是条件判断 返回 true 或者 false ；

javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。

图片定位后的left值，

css加上js

加上透明度的改变效果就可以了。

类似这个样子吗？

background-color: rgba(255,255,255, 0~1)

0~1的透明度自己调

window.onload = function () {    

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

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

var buttons = document.getElementById('buttons').getElementsByTagName('span');    

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

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

var index = 1;    

var len = 5;    

var animated = false;    

var interval = 3000;    

var timer;    

function animate (offset) {    

if (offset == 0) {    

return;    

}    

animated = true;    

var time = 300;    

var inteval = 10;    

var speed = offset/(time/inteval);    

var left = parseInt(list.style.left) + offset;    

var go = function (){    

if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {    

list.style.left = parseInt(list.style.left) + speed + 'px';    

setTimeout(go, inteval);    

}    

else {    

list.style.left = left + 'px';    

if(left>-200){    

list.style.left = -600 * len + 'px';    

}    

if(left<(-600 * len)) {    

list.style.left = '-600px';    

}    

animated = false;    

}    

}    

go();    

}    

function showButton() {    

for (var i = 0; i < buttons.length ; i++) {    

if( buttons[i].className == 'on'){    

buttons[i].className = '';    

break;    

}    

}    

buttons[index - 1].className = 'on';    

}    

function play() {    

timer = setTimeout(function () {    

next.onclick();    

play();    

}, interval);    

}    

function stop() {    

clearTimeout(timer);    

}    

next.onclick = function () {    

if (animated) {    

return;    

}    

if (index == 5) {    

index = 1;    

}    

else {    

index += 1;    

}    

animate(-600);    

showButton();    

}    

prev.onclick = function () {    

if (animated) {    

return;    

}    

if (index == 1) {    

index = 5;    

}    

else {    

index -= 1;    

}    

animate(600);    

showButton();    

}    

for (var i = 0; i < buttons.length; i++) {    

buttons[i].onclick = function () {    

if (animated) {    

return;    

}    

if(this.className == 'on') {    

return;    

}    

var myIndex = parseInt(this.getAttribute('index'));    

var offset = -600 * (myIndex - index);    

animate(offset);    

index = myIndex;    

showButton();    

}    

}    

container.onmouseover = stop;    

container.onmouseout = play;    

play();    

}     

var buttons = document.getElementById('buttons').getElementsByTagName('span');

buttions获取的是buttons下的几个span,是数组的

animate函数里if判断 是list.style.left=-600/3000+'px',不是newlist

left=0的位置是第五张图片的附属图，一开始要显示的是第一张图，所以要lefts=-600px

为什么要这样做，你看后面视频就能明白的了

因为放的第一张图片不是要显示的第一张，而是第五张，第一张图片实际是在600px的位置。left：-600px可以理解为右移600px，移到下一张。我是这样理解的

你需要一个div定位这个轮播图的位置，在这个div内部才是轮播，至于100%的宽度，你修改轮播图的div就行了，如下：

<!-- 这是定位轮播图位置 设置你需要的宽度：width:860px-->
<div>

    <!-- 这是轮播图最外层的容器 设置宽度：width:100%-->
    <div>
        <!-- 存放每个图片，设置：width:100% -->
        <div></div>
    </div>
</div>

我试试给你解释下

假如前后不加一张图片的话，图片顺序为[1,2,3,4,5]，当你点到第 5 张图时，再点“下一张”（就是要回到第 1 张图那里），这时候，你想象下那个画面，会一瞬间“刷刷刷”地闪过中间那几张图片才能到第 1 张图那里，这样，太难看了吧。

为了解决这个问题，所以要在第 5 张那里加多一张 1 图，图片顺序为 [1,2,3,4,5,1]。当你在第 5 张图点下一张时，图片滚动顺序是这样的：5 ----> (1) ----> 1，（注：中间的那个 1 是指后面多加的 1 图），一旦到了那个“多加的 1 图”，轮播就会瞬间回到 前面的 1 图那里。

因为都是“1 图”，所以视觉上不会有那个一次“刷刷刷”闪过好几张图片的效果。

同理（点“上一张”），要在 1 图前加一个 5 图。

不知道这样说，你懂不懂。

因为是先切换图，在把值复原

&lt; &gt; 这两个就是左右箭头,然后通过css给添加样式

圆点就是五个小方块,然后通过border-radius: 50%;让它变原,再给背景颜色

用css改变样式应该就可以啦，要注意两个鼠标移动事件，全屏的话应该要删除

视频下面有资料下载，

多看几遍视频，理解理解。

给下面的按钮做一个命名， 第一个为编号1，第二个为编号2， 以此类推， 这样可以实现在第几张图片显示的时候，对应 的圆点亮起来。

你可以给它叫任何名字， 这个不是 z-index

可以设置图片的大小。如 img{width:400px;height:600px;}

楼上的说错了， 放样式表是不行的， 因为 *.style.left， 只能取到内联样式， 无法取到css里面的值。

但是list.currentStyle.left就可以取到css里面的， 你可以试一下。

参考vivian老师的教程， 你可以写一个函数来调用。

function getStyle(obj,attr){    

if(obj.currentStyle){    

  return obj.currentStyle[attr];    

}    

else{    

return getComputedStyle(obj,false)[attr];    

}    

}     

http://www.imooc.com/video/664  右下角有个资料下载，点击下载就OK了

因为显示的第一张图应该是img集合中的第2个哦

学习这些东西前期都是模仿，等模仿到一定程度你就能提炼这里边的精华内容了，加油！！！

containder和img改变就行

抱歉回复晚了，，你的bannerBox的height单位不对，，加上px就好了

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#ab{ width:100%; height:600px;position:absolute;}

#ba{ width:600px; height:500px; border:1px solid rgba(102,153,153,1); margin:0 auto;

position:relative; margin-top:100px; overflow:hidden}

#baa{ width:2400px; height:500px;position:relative;}

img{ width:600px; height:500px;float:left;}

</style>

</head>

<body>

<div id="ab">

<div id="ba">

<div id="baa">

<img src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

<img src="4.jpg">

</div>

</div>

</div>

<script>

    var baa=document.getElementById("baa")

function aa(){

  if(baa.offsetLeft<-1750){

 baa.style.left="0px"; 

 setTimeout(aa,2000) 

  }else{

  baa.style.left=baa.offsetLeft-100+"px";   

  //setTimeout(aa,100)

  if(baa.offsetLeft%600==0){  

 setTimeout(aa,2000) }

 else{setTimeout(aa,100)}

 }

}

setTimeout(aa,2000)

</script>

</body>

</html>