效果圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; border:none; } li{ list-style: none; } #box{ height:340px; width:790px; position: relative; margin:100px auto; } #box #list1{ height:340px; width:790px; } #box #list1 li{ font-size: 80px; line-height: 340px; text-align: center; height:340px; width:790px; position: absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); } #box #list1 li img{ height:340px; width:790px; } #shang,#xia{ height:80px; width:50px; color:#212121; background: #ccc; font-size: 60px; font-weight: bold; line-height: 80px; text-align: center; position: absolute; top:130px; opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; } #shang{ left:0; } #xia{ right:0; } #box #list2{ height:20px; width:195px; position: absolute; left:297px; bottom:25px; opacity: 0.8; filter: alpha(opacity=80); } #box #list2 li{ height:20px; width:20px; background: #ccc; border-radius: 50%; float: left; margin-right:5px; cursor: pointer; } #box #list2 li.active{ background: black; } </style> <script type="text/javascript"> onload = function(){ var oBox = document.getElementById('box'); var oLIst1 = document.getElementById('list1'); var aLi1 = oLIst1.getElementsByTagName('li'); var oLIst2 = document.getElementById('list2'); var aLi2 = oLIst2.getElementsByTagName('li'); var oShang = document.getElementById('shang'); var oXia = document.getElementById('xia'); aLi1[0].style.opacity = 1; aLi1[0].style.filter = 'alpha(opacity=100)'; var size = aLi1.length; var i = 0; var timer = setInterval(function(){ i ++; move(); },2000); function move(){ if(i >= size){ i = 0 } if(i < 0){ i = size-1; } for(var j = 0; j < aLi1.length; j ++){ if(j == i){ animate(aLi1[j],{opacity:100}); aLi2[j].className = 'active'; }else{ animate(aLi1[j],{opacity:0}); aLi2[j].className = ''; } } } //前一張 oShang.onclick = function(e){ var evt = e || event; evt.preventDefault(); i --; move(); } //后一張 oXia.onclick = function(e){ var evt = e || event; evt.preventDefault(); i ++; move(); } //下面的圓點 for(var k = 0;k < aLi2.length; k ++){ aLi2[k].index = k; aLi2[k].onmouseenter = function(){ i = this.index; move(); } } oBox.onmouseenter = function(){ clearInterval(timer); } oBox.onmouseleave = function(){ timer = setInterval(function(){ i ++; move(); },2000); } /*************************緩沖運動 可封裝留著以后備用^_^*************************/ function getStyleAttr(obj, attr){ if (window.getComputedStyle){ return getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } function animate(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for (var attr in json){ var iTarget = json[attr]; var current; if (attr == "opacity"){ current = parseFloat(getStyleAttr(obj, attr))*100; current = Math.round(current); } else { current = parseFloat(getStyleAttr(obj, attr)); current = Math.round(current); } var speed = (iTarget-current)/8; (400-393)/8 speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if (current != iTarget){ bStop = false; } if (attr == "opacity"){ obj.style[attr] = (current+speed)/100; obj.style.filter = "alpha(opacity=" + (current+speed) + ")"; } else { obj.style[attr] = current+speed + "px"; } } if (bStop){ console.log("停止運動"); clearInterval(obj.timer); if (fn) { fn(); } } }, 30); } } </script> </head> <body> <div id="box"> <ul id="list1"> <li style="background: red;">1</li> <li style="background: yellow;">2</li> <li style="background: green;">3</li> <li style="background: blue;">4</li> <li style="background: blueviolet;">5</li> <li style="background: brown;">6</li> <li style="background: orangered;">7</li> <li style="background: palevioletred;">8</li> </ul> <ul id="list2"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li style="margin-right:0px;"></li> </ul> <div id="shang"> < </div> <div id="xia"> > </div> </div> </body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網!
新聞熱點
疑難解答
