HTML部分 <body> <div id="container"> <div id="list" class="pic" style="left:-400px"> <img src="img/5.jpg" alt="1" /> <img src="img/1.jpg" alt="1" /> <img src="img/2.jpg" alt="1" /> <img src="img/3.jpg" alt="1" /> <img src="img/4.jpg" alt="1" /> <img src="img/5.jpg" alt="1" /> <img src="img/1.jpg" alt="1" /> </div> <div id="circle" class="circle"> <div class="on"> <p id="small" style="display: none"> <img src="img/1.jpg" alt=""> <a href="#"></a> </p> </div> <div> <p id="small" style="display: none"> <img src="img/2.jpg" alt=""> <a href="#"></a> </p> </div> <div> <p id="small" style="display: none"> <img src="img/3.jpg" alt=""> <a href="#"></a> </p> </div> <div> <p id="small" style="display: none"> <img src="img/4.jpg" alt=""> <a href="#"></a> </p> </div> <div> <p id="small" style="display: none"> <img src="img/5.jpg" alt=""> <a href="#"></a> </p> </div> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> </body>
CSS部分 <style> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 400px; height: 400px; margin: 0 auto; border: 5px solid #333; overflow: hidden;/*顯示一張圖片，左右的隱藏*/ } #list { position: absolute; z-index: 1; width: 2800px; height: 400px; } #list img { float: left; width: 400px; height: 400px; } .circle { position: absolute; left: 150px; bottom: 20px; z-index: 2; width: 100px; height: 10px; } .circle div { float: left; position: relative; margin-right: 5px; width: 10px; height: 10px; border-radius: 50%; border:1px solid #fff; background: #333; cursor: pointer; } .circle div img { position: absolute; bottom: 20px; left: -54px; width: 110px; height: 70px; border-radius: 0; border: 5px solid #fff; } .circle div a { position: absolute; display: inline-block; top: -12px; left: -1px; width: 0; height: 0; opacity: 1; background: none; border-radius: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid #fff; } .circle .on { background: #FF972F; } a { position: absolute; top: 180px; z-index: 2;/*箭頭所在層置頂*/ display: none; width: 40px; height: 40px; line-height: 40px; color: #fff; font-size: 36px; text-align: center; font-weight: bold; border-radius: 50%;/*箭頭設置成圓形*/ background: #000; filter:alpha(opacity:30); opacity:0.3;/*設置透明度*/ cursor: pointer; } a:hover { filter:alpha(opacity:60); opacity:0.6; } #container:hover a { display: block; } #prev { left:10px; } #next { right:10px; } </style>
js部分 <script> window.onload = function() { var oContainer = document.getElementById('container'); var oList = document.getElementById('list'); var oPrev = document.getElementById('prev'); var oNext = document.getElementById('next'); var oCircle = document.getElementById('circle'); var aCircle = oCircle.getElementsByTagName('div'); var aP = oCircle.getElementsByTagName('p'); var timer; var num = 0; function animate(offset) { var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if(newLeft > -400) { //如果當前的 a = list.style.left = 0;此時圖片位於被隱藏的第五張，它的前面沒有圖， 就把-2000px賦值給a,此時圖片還是位於第五張圖，而她的前面有五張圖片所以a = -400px*5=-2000px; list.style.left = -2000 + 'px'; } if(newLeft < -2000) { //同理，如果當前的a= list.style.left = -2400px;此時圖片位於第一張，它的前面有六張圖，就把-400px賦值給a,此時圖片還是位於第一張，而它的前面有一張圖，所以a = -400px; list.style.left = -400 + 'px'; } } //圖片自動輪播 function autoPlay() { //設置定時器，每隔1.5s運行一次oNext.onclick timer = setInterval(function(){ oNext.onclick(); },1500); } function stopAutoPlay (){ clearInterval(timer); } //鼠標移入圖片，清除定時器，移開，打開定時器 oContainer.onmouseover = stopAutoPlay; oContainer.onmouseout = autoPlay; autoPlay(); //設置小圓點 function circleShow() { //清除之前所有的樣式 for(var i = 0; i<aCircle.length; i++) { aCircle[i].className = ''; } //把第一個下標為0的設置屬性className aCircle[num].className = 'on'; } //左右箭頭切換圖片，圓點樣式也跟着移動 oPrev.onclick = function() { num--; if(num == -1) { num = aCircle.length - 1; } circleShow(); animate(400); } oNext.onclick = function() { num++; if(num == aCircle.length) { num = 0; } circleShow(); animate(-400); } for(var i=0; i<aCircle.length; i++) { aCircle[i].index = i; //鼠標點擊小圓點顯示相應圖片 aCircle[i].onclick = function() { //圖片相對左側移動的距離 var offset = 400 * (num-this.index); animate(offset); //鼠標移動到小圓點的位置 num = this.index; circleShow(); } //鼠標移入小圓點顯示相應圖片 aCircle[i].onmouseover = function(){ aP[this.index].style.display = 'block'; }; aCircle[i].onmouseout = function(){ aP[this.index].style.display = 'none'; }; }