//css代碼

#pcontainer{

overflow: hidden;

position: relative;

width:1400px;

height:800px;

border: 1px solid black;

}

#list{

width:9800px;

height:800px;

position: absolute;

z-index:1;

}

#list img{float:left;}

#buttons

{

position: absolute;

height:10px;

width:100px;

z-index: 2;

bottom:20px;

left: 650px;

}

#buttons span

{

cursor: pointer;

float:left;

border: 1px solid #fff;

width: 10px;

height:10px;

border-radius: 50%;

background: #333;

margin-right: 5px;

}

#buttons.on{background: orangered;}

.arrow {?

cursor: pointer;?

display: none;?

line-height: 39px;?

text-align: center;

font-size: 36px;

font-weight: bold;?

width: 40px;

height: 40px;

position: absolute;?

z-index: 2;

top: 180px;

background-color: RGBA(0,0,0,.3);

color: #fff;

}

? ? ? .arrow:hover { background-color: RGBA(0,0,0,.7);}

? ? ? ?#container:hover .arrow { display: block;}

? ? ? ?#prev { left: 100px;}

? ? ? ?#next { right: 100px;}

//html代碼

<div id="pcontainer">

<div><img src="images/Alta.jpg" width="800" ></div>

<div id="list" style="left: -1400px;">

<img src="images/6.jpg" width="1400" alt="">

<img src="images/2.jpg" width="1400" alt="">

<img src="images/3.jpg" width="1400" alt="">

<img src="images/4.jpg" width="1400" alt="">

<img src="images/5.jpg" width="1400" alt="">

<img src="images/6.jpg" width="1400" alt="">

<img src="images/2.jpg" width="1400" alt="">

</div>

<div id="buttons">

<span index="1" class="on"></span>

<span index="2"></span>

<span index="3"></span>

<span index="4"></span>

<span index="5"></span>

</div>

<a href="javascript:;" class="arrow" id="prev">&lt;</a>

<a href="javascript:;" class="arrow" id="next">&gt;</a>

</div>

//js代碼

window.onload = function(){

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

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

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

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

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

function animate(offset){

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

}

next.onclick=function(){

animate(1400);

}

prev.onclick=function(){

animate(-1400);

}

}