? #container{
??????? position: relative;
??????? width:1350px;
??????? height: 600px;
??????? overflow: hidden;
??? }
??? #list{
??????? position: absolute;
??????? z-index: 1;
??????? width: 9450px;
??????? height: 600px;
??? }
??? #list img{
??????? float: left;
??????? width: 1350px;
??????? height: 600px
??? }
??? #buttons{
??????? position: absolute;height: 10px;width: 100px;
??????? z-index: 2;bottom: 50px;left:650px;
??? }
??? #buttons span{
??????? float: left;
??????? margin-right: 5px;
??????? width: 15px;
??????? height: 15px;
??????? border: 1px solid #fff;
??????? border-radius: 50%;
??????? background: #333;
??????? cursor: pointer;
??? }
??? #buttons .on{
??????? background-color: red;
??? }
??? .arrow{
??????? position: absolute;
??????? top: 280px;

??????? z-index: 2;/*
??????? display: none;*/
??????? width: 40px;
??????? height: 40px;
??????? font-size: 36px;
??????? font-weight: bold;
??????? line-height: 39px;
??????? text-align: center;
??????? color: #fff;
??????? background-color: rgba(0,0,0,3);
??????? cursor: pointer;/*鼠標指針變成手的形狀*/
??? }
??? .arrow:hover{
??????? background-color: rgba(0,0,0,.7);
??? }
??? #container:hover.arrow{
??????? display: block;
??? }
??? #prev{
??????? left: 80px;
??? }
??? #next{
??????? right: 80px;
??? }
??? * {
??????????? margin: 0;
??????????? padding: 0;
??????????? text-decoration: none;
??????? }

?????? body {
?????????? padding: 0px;
??????? }
?? ?</style>
??? <script type="text/javascript">
??????? /* 在整個頁面加載完畢以后獲取元素 */
??????? window.onload=function (){
??????????? var container =document.getElementById('container');
??????????? var list=document.getElementById('list');
??????????? var buttons=document.getElementById('buttons').getElementsByTagName('span');//獲取5個按鈕
??????????? var prev=document.getElementById('prev');//上一個
??????????? var next=document.getElementById('next');//下一個
?????????? ?
??????????? function animate(offset){
??????????????? var newLeft =? parseInt(list.style.left) + offset;
??????????????? list.style.left = newLeft + 'px';
??????????????? if(newLeft > -1350){
??????????????????? list.style.left = -6750 + 'px'
??????????????? }
??????????????? if (newLeft < -6750){
??????????????????? list.style.left = -1350 + 'px'
??????????????? }
??????????? }
??????????? next.onclick = function(){
??????????????? index += 1;
??????????????? showButton();
??????????????? animate(-1350);
??????????? }
??????????? prev.onclick = function(){
??????????????? animate(1350);
??????????????? index -= 1;
??????????????? showButton();
??????????? }
????? ?

??? }
??? </script>